آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش مدیریت ورودی های متنی در 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 کاربر می اندازیم.

  • 413
  •    0
  • تاریخ ارسال :   1398/05/30

دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .