آموزش مدیریت ورودی های متنی در React Native-آموزش React Native

مدیریت ورودی های متنی در React Native

component پایه ای که برای دریافت ورودی از کاربر استفاده می شود TextInput است. این component یک prop به اسم onChangeText دارد که می توان به آن تابعی داد که پس از هر تغییر متن صدا زده شود. یک prop به اسم onSubmitEditing دارد که می توان به آن تابعی داد که هنگام ثبت دیتا، صدا زده شود.

برای مثال، فرض کنیم همزمان با تایپ کردن کاربر، قرار است کلمات به زبان دیگری ترجمه شوند. در این زبان جدید ترجمه هر کلمه ای 🍕 است! جمله ی "Hello there Bob" به "🍕🍕🍕" ترجمه می شود.

آموزش پروژه محور React Native

import React, { Component } from 'react';
import { 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})}
          value={this.state.text}
        / >
                        < Text style={ {padding: 10, fontSize: 42}} >
          {this.state.text.split(' ').map((word) = > word && '🍕').join(' ')}
        < /Text >
      < /View >
    );
  }
}

در این مثال، text را درون یک state نگه می داریم، چرا که در طول زمان مقدار آن متغیر است.

کارهای زیادی می توان روی TextInput ها انجام داد. برای مثال، می توان هنگام تایپ کردن کاربر، متن ورودی را اعتبارسنجی کرد. برای مثال هایی با جزئیات بیشتر، مستندات React را ببینید، یا مستندات مربوط به TextInput را ببینید.

دریافت ورودی از کاربر یکی از راه های تعامل با کاربر است. در گام بعد، نگاهی به راه های کار با ورودی های touch کاربر می اندازیم.