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

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

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

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

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

export default class PizzaTranslator extends Component {
  constructor(props) {
    super(props);
    this.state = {text: ''};
  }

  render() {
    return (
      <View style={{padding: 10}}>
        <TextInput
          style={{height: 40}}
          placeholder="Type here to translate!"
          onChangeText={(text) => this.setState({text})}
        />
        <Text style={{padding: 10, fontSize: 42}}>
          {this.state.text.split(' ').map((word) => word && '@').join(' ')}
        </Text>
      </View>
    );
  }
}

// تخطّ هذا السطر إن كنت تستعمل أداة 
// Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => PizzaTranslator);

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

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

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

مصادر

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