التعامل مع المدخلات النصية في React Native

التعامل مع المدخلات النّصيّة (Text Input)

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 الرسمي.