عرض مصدر ReactNative/handling text input

<noinclude>{{DISPLAYTITLE:التعامل مع المدخلات النصية في React Native}}</noinclude>المكون <code>[[ReactNative/textinput|TextInput]]</code> مكونٌ أساسيّ يسمح للمستخدم بإدخال النّصوص، ويمتلك خاصيّة <code>onChangeText</code> تقبل دالّةً تُستدعَى في كل مرة يُغيَّر فيها النص، والخاصيّة <code>onSubmitEditing</code> التي تأخذ دالةً تُستدعى عند إرسال النص.

لنفترض مثلًا أنّ تطبيقك يُترجم كلمات المستخدم التي يكتبها إلى لغةٍ مختلفة، ستكتب كل كلمةٍ واحدةٍ في هذه اللغة الجديدة بنفس الطريقة وهي 🍕، لذا ستُترجَم الجملة <code>"Hello there Bob"</code> إلى "🍕🍕🍕". انظر المثال التالي ([https://snack.expo.dev/@hsoubwiki/handling-text-input تجربة حية]):
<syntaxhighlight lang="javascript">
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;
</syntaxhighlight>
نخزّن النص (‎<code>text</code>‎) في هذا المثال في الحالة لأنه يتغير بمرور الوقت.

هناك الكثير من الأشياء التي قد ترغب بإنجازها بحقل إدخال النص، كالتحقق من صحة النص المُدخَل في الوقت نفسه الذي يكتب فيه المستخدم، لمزيد من الأمثلة التفصيلية، راجع [[React/forms#.D8.A7.D9.84.D9.85.D9.83.D9.88.D9.86.D8.A7.D8.AA .D8.A7.D9.84.D9.85.D8.B6.D8.A8.D9.88.D8.B7.D8.A9|توثيق React حول المكونات المضبوطة]]، أو توثيق المكوّن [[ReactNative/textinput|‎<code>TextInput</code>‎]].

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

== مصادر ==
* [https://facebook.github.io/react-native/docs/handling-text-input صفحة Handling Text Input في توثيق React Native الرسمي.]
[[تصنيف:ReactNative]]
[[تصنيف:React Native Docs]]