اذهب إلى المحتوى

السؤال

نشر

أعمل على بناء نموذج لتسجيل الدخول "نظام مصادقة" و أريد أن ينتقل التركيز إلى حقل الإدخال التالي بعد أن أضغط على زر Next.

كيف يمكن تنفيذ أمر كهذا؟

<TextInput 
   style = {styles.emailInput}
   returnKeyType = {"next"}
   autoFocus = {true}
   placeholder = "البريد الالكتروني" />
     
<TextInput
   style = {styles.passwordInput}          
   maxLength = {10}
   placeholder = "كلمة المرور" />
     

 

Recommended Posts

  • 0
نشر (معدل)

قومي بتعيين تركيز  emailInput الثاني ، عند تشغيل  passwordInput السابق للدالةـ onSubmitEditing

أولا  قومي بإضافة Ref للحقل الثاني 

<TextInput
   ref={(input) => { this.passwordInput = input; }}
   style = {styles.passwordInput}          
   maxLength = {10}
   placeholder = "كلمة المرور"
/>

بعد ذلك إستخدمي الدالة onSubmitEditing للتنصت على حدث الضغط على next في الحقل الأول:

<TextInput
    placeholder = "البريد الالكتروني"
    returnKeyType="next"
    onSubmitEditing={() => { this.passwordInput.focus(); }}
    blurOnSubmit={false}
    style = {styles.emailInput}
    autoFocus = {true}
   
/>

 

تم التعديل في بواسطة محمد أيت لعرايك
  • 0
نشر

يمكنك استخدام  react-native-autofocus

npm install react-native-autofocus

هذه المكتبة تعمل على التركيز التلقائي على حقل الإدخال التالي عند الإدخال 

import { Form, TextInput } from 'react-native-autofocus'

export default () => (
  <Form>
    <TextInput placeholder="test" />
    <TextInput placeholder="test 2" />
  </Form>
)

 

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...