الفرق بين المراجعتين لصفحة: «ReactNative/handling text input»

مراجعة 13:40، 30 أغسطس 2021

المكون TextInput مكونٌ أساسيّ يسمح للمستخدم بإدخال النّصوص، ويمتلك خاصيّة onChangeText تقبل دالّةً تُستدعَى في كل مرة يُغيَّر فيها النص، والخاصيّة onSubmitEditing التي تأخذ دالةً تُستدعى عند إرسال النص.

لنفترض مثلًا أنّ تطبيقك يُترجم كلمات المستخدم التي يكتبها إلى لغةٍ مختلفة، ستكتب كل كلمةٍ واحدةٍ في هذه اللغة الجديدة بنفس الطريقة وهي 🍕، لذا ستُترجَم الجملة "Hello there Bob" إلى "🍕🍕🍕". انظر المثال التالي (تجربة حية):

import React, { Component } from 'react';
import { AppRegistry, Text, TextInput, View } from 'react-native';

import React, { useState } from 'react';
import { Text, TextInput, View } from 'react-native';

const PizzaTranslator = () => {
  const [text, setText] = useState('');
  return (
    <View style={{padding: 10}}>
      <TextInput
        style={{height: 40}}
        placeholder="!اكتب هنا لتترجم"
        onChangeText={text => setText(text)}
        defaultValue={text}
      />
      <Text style={{padding: 10, fontSize: 42}}>
        {text.split(' ').map((word) => word && '🍕').join(' ')}
      </Text>
    </View>
  );
}

export default PizzaTranslator;

نخزّن النص (‎text‎) في هذا المثال في الحالة لأنه يتغير بمرور الوقت.

هناك الكثير من الأشياء التي قد ترغب بإنجازها بحقل إدخال النص، كالتحقق من صحة النص المُدخَل في الوقت نفسه الذي يكتب فيه المستخدم، لمزيد من الأمثلة التفصيلية، راجع توثيق React حول المكونات المضبوطة، أو توثيق المكوّن ‎TextInput‎.

حقل إدخال النص هو أحد الطرائق التي يتفاعل بها المستخدم مع التطبيق، لنستكشف طريقة أخرى ولنتعلّم كيفية التعامل مع اللمسات.

مصادر

صفحة Handling Text Input في توثيق React Native الرسمي.

@@ سطر 1: / سطر 1: @@
-<noinclude>{{DISPLAYTITLE:التعامل مع المدخلات النصية في React Native}}</noinclude>
+<noinclude>{{DISPLAYTITLE:التعامل مع المدخلات النصية في React Native}}</noinclude>المكون <code>[[ReactNative/textinput|TextInput]]</code> مكونٌ أساسيّ يسمح للمستخدم بإدخال النّصوص، ويمتلك خاصيّة <code>onChangeText</code> تقبل دالّةً تُستدعَى في كل مرة يُغيَّر فيها النص، والخاصيّة <code>onSubmitEditing</code> التي تأخذ دالةً تُستدعى عند إرسال النص.
-==التعامل مع المدخلات النّصيّة (Text Input)==
+لنفترض مثلًا أنّ تطبيقك يُترجم كلمات المستخدم التي يكتبها إلى لغةٍ مختلفة، ستكتب كل كلمةٍ واحدةٍ في هذه اللغة الجديدة بنفس الطريقة وهي 🍕، لذا ستُترجَم الجملة <code>"Hello there Bob"</code> إلى "🍕🍕🍕". انظر المثال التالي ([https://snack.expo.dev/@hsoubwiki/handling-text-input تجربة حية]):
-<code>[[ReactNative/textinput|TextInput]]</code> مكونٌ أساسيّ يسمح للمستخدم بإدخال النّصوص، ويمتلك خاصيّة <code>onChangeText</code> تقبل دالّةً تُستدعَى في كل مرة يُغيَّر فيها النص، والخاصيّة <code>onSubmitEditing</code> التي تأخذ دالةً تُستدعى عند إرسال النص.
-لنفترض مثلًا أنّ تطبيقك يُترجم كلمات المستخدم التي يكتبها إلى لغةٍ مختلفة، ستكتب كل كلمةٍ واحدةٍ في هذه اللغة الجديدة بنفس الطريقة وهي 🍕، لذا ستُترجَم الجملة <code>"Hello there Bob"</code> إلى "🍕🍕🍕".
 <syntaxhighlight lang="javascript">
 import React, { Component } from 'react';