الفرق بين المراجعتين لصفحة: «ReactNative/handling text input»
لا ملخص تعديل |
|||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:التعامل مع المدخلات النصية في React Native}}</noinclude> | <noinclude>{{DISPLAYTITLE:التعامل مع المدخلات النصية في React Native}}</noinclude> | ||
==التعامل مع المدخلات النّصيّة (Text Input)== | ==التعامل مع المدخلات النّصيّة (Text Input)== | ||
<code>[[ReactNative/textinput|TextInput]]</code> مكونٌ | <code>[[ReactNative/textinput|TextInput]]</code> مكونٌ أساسيّ يسمح للمستخدم بإدخال النّصوص، يمتلك خاصيّةً <code>onChangeText</code> تقبل دالّة تُستدعَى في كل مرة يُغيَّر فيها النص، والخاصيّة <code>onSubmitEditing</code> التي تأخذ دالة تُستدعى عند إرسال النص. | ||
على سبيل المثال، لنفترض أنّ تطبيقك يُترجم كلمات المستخدم التي يكتبها إلى لغة مختلفة. في هذه اللغة الجديدة، | على سبيل المثال، لنفترض أنّ تطبيقك يُترجم كلمات المستخدم التي يكتبها إلى لغة مختلفة. في هذه اللغة الجديدة، تُكتَب كل كلمة واحدة بنفس الطريقة: <code>@</code>. لذا، ستُترجَم الجملة <code>"Hello there Bob"</code> إلى <code>"@@@"</code>. | ||
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
import React, { Component } from 'react'; | import React, { Component } from 'react'; | ||
| سطر 36: | سطر 36: | ||
في هذا المثال، نخزّن النص (<code>text</code>) في الحالة لأنه يتغير بمرور الوقت. | في هذا المثال، نخزّن النص (<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|كيفية التعامل مع اللمسات]]. | حقل إدخال النص هو أحد الطرائق التي يتفاعل بها المستخدم مع التطبيق. لنستكشف طريقة أخرى ولنتعلّم [[ReactNative/handling touches|كيفية التعامل مع اللمسات]]. | ||
مراجعة 13:08، 24 يناير 2019
التعامل مع المدخلات النّصيّة (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="اكتُب هنا لتُترجِم"
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.
حقل إدخال النص هو أحد الطرائق التي يتفاعل بها المستخدم مع التطبيق. لنستكشف طريقة أخرى ولنتعلّم كيفية التعامل مع اللمسات.