নেটিভ প্রতিক্রিয়া: "পরবর্তী" কীবোর্ড বোতাম টিপানোর পরে পরবর্তী পাঠ্য ইনপুট কীভাবে নির্বাচন করবেন?

Question

আমি নিম্নলিখিত হিসাবে দুটি পাঠ্য ইনপুট ক্ষেত্র সংজ্ঞায়িত করেছি:

<TextInput 
   style = {styles.titleInput}
   returnKeyType = {"next"}
   autoFocus = {true}
   placeholder = "Title" />
<TextInput
   style = {styles.descriptionInput}          
   multiline = {true}
   maxLength = {200}
   placeholder = "Description" />

তবে আমার কীবোর্ডে "পরবর্তী" বোতাম টিপানোর পরে, আমার প্রতিক্রিয়া-নেটিভ অ্যাপ্লিকেশনটি দ্বিতীয় পাঠ্য ইনপুট ক্ষেত্রে ঝাঁপিয়ে পড়ে না। আমি কীভাবে এটি অর্জন করতে পারি?

ধন্যবাদ!

Comments

মিচের উত্তর (বর্তমানে তৃতীয় এক ডাউন) আমার পক্ষে v0.42-এ কাজ করে।

— লরেন্স 21

প্রতিক্রিয়া v16.8.0বা উপরের লোকের জন্য আমি নীচের দিকে @ এলি জনসনের দেওয়া উত্তরটি সুপারিশ করব। প্রতিক্রিয়া refনীচের সমাধানগুলিতে প্রদত্ত অনেকগুলি ব্যবহারকে অবমূল্যায়ন করেছে ।

— thedeg123

Answer 1

দ্বিতীয় সেট TextInputফোকাস যখন পূর্ববর্তী TextInputএর onSubmitEditingসূত্রপাত হয়।

এটা চেষ্টা কর

1. দ্বিতীয় পাঠ্য ইনপুটটিতে একটি রেফার যুক্ত করা হচ্ছে
   ref={(input) => { this.secondTextInput = input; }}

2. প্রথম টেক্সটইনপুটের অন ​​সাবমিটএডিটিং ইভেন্টটিতে ফোকাস ফাংশনটি আবদ্ধ করুন ।
   onSubmitEditing={() => { this.secondTextInput.focus(); }}

3. কীবোর্ডের ঝাঁকুনি প্রতিরোধ করতে অস্পষ্টতে ব্লারঅনসামিট সেট করতে ভুলবেন না।
   blurOnSubmit={false}

সব শেষ হয়ে গেলে, এটি দেখতে এমন হওয়া উচিত।

<TextInput
    placeholder="FirstTextInput"
    returnKeyType="next"
    onSubmitEditing={() => { this.secondTextInput.focus(); }}
    blurOnSubmit={false}
/>

<TextInput
    ref={(input) => { this.secondTextInput = input; }}
    placeholder="secondTextInput"
/>

Comments

উল্লেখ করার মতো বিষয়, সেই onSubmitEditingকলব্যাককে blurইভেন্টের পরে ডাকা হয় । তাই তাত্ক্ষণিকভাবে পরবর্তী উপাদানগুলিতে মনোনিবেশ করা থাকলে কীবোর্ডটি ক্রেজি হতে পারে। সুতরাং ডোন বোতামটি শেষ ইনপুটটি ঝাপসা করার অনুমতি হিসাবে blurOnSubmit={false}ফর্মের সমস্ত উপাদানগুলিতে সেট করা সহায়ক হতে পারে তবে trueশেষ উপাদানটিতে রেখে যেতে পারে ।

— e1dar

V0.36 হিসাবে এটি আর কাজ করে না। উপাদানটিতে কোনও পদ্ধতি "ফোকাস" নেই। আমাদের এখন এটি করা উচিত?

— মিচ

@ মিচ 0.40.0 এ সূক্ষ্মভাবে কাজ করে। আপনি যে সংস্করণটি চালাচ্ছিলেন সেটিতে একটি বাগ হতে পারে।

— ভিকি

আরএন 0.49 ব্যবহার করে, blurOnSubmit={false}কীবোর্ডের ঝাঁকুনি প্রতিরোধে যুক্ত করা এর ফলে কাজ করা বন্ধ করে দিয়েছে, কী হচ্ছে জানেন যে কেউ?

— নাবিল লন্ডন

যে কেউ focusকাজটি পরিচালনা করতে পারেননি , তার জন্য নিশ্চিত হন যে আপনি TextInputউপাদানটির জন্য একটি মোড়ক ব্যবহার করছেন না । আপনার কাছে যদি বলার CustomTextInputউপাদান থাকে যা মোড় করে থাকে তবে TextInputআপনাকে TextInputসেই উপাদানটির জন্য ঝাপসা এবং ফোকাস পদ্ধতিগুলি প্রয়োগ করতে হবে যাতে এটি প্রত্যাশার মতো কাজ করবে।

— সিহাদ তুরহান

Answer 2

আপনি রেফ ব্যবহার না করে এটি করতে পারেন । এই পদ্ধতির পছন্দসই, যেহেতু রেফগুলি ভঙ্গুর কোডের দিকে নিয়ে যেতে পারে । প্রতিক্রিয়া ডক্স যেখানে সম্ভব অন্যান্য সমাধানের খোঁজার পরামর্শ:

আপনি যদি প্রতিক্রিয়া সহ বেশ কয়েকটি অ্যাপ্লিকেশন প্রোগ্রাম না করে থাকেন তবে আপনার প্রথম প্রবণতাটি সাধারণত আপনার অ্যাপ্লিকেশনটিতে "জিনিসগুলি ঘটানোর জন্য" রেফ ব্যবহার করার চেষ্টা করে। যদি এটি হয় তবে একটি মুহুর্ত নিন এবং উপাদানটির স্তরক্রমের ক্ষেত্রে রাজ্যের মালিকানা কোথায় হওয়া উচিত তা নিয়ে আরও সমালোচনা করুন। প্রায়শই, এটি স্পষ্ট হয়ে যায় যে সেই রাজ্যের "নিজস্ব" হওয়ার উপযুক্ত জায়গাটি স্তরক্রমের উচ্চ স্তরে। সেখানে রাষ্ট্র স্থাপন করা প্রায়শই "জিনিসগুলি ঘটানোর জন্য" রেফ ব্যবহার করার যে কোনও ইচ্ছা দূর করে - পরিবর্তে, ডেটা প্রবাহ সাধারণত আপনার লক্ষ্য অর্জন করবে।

পরিবর্তে, আমরা দ্বিতীয় ইনপুট ক্ষেত্রে ফোকাস করতে একটি রাষ্ট্র পরিবর্তনশীল ব্যবহার করব।

1. একটি স্টেট ভেরিয়েবল যুক্ত করুন যা আমরা প্রপোজ হিসাবে পাস করব DescriptionInput:

   initialState() {
     return {
       focusDescriptionInput: false,
     };
   }

2. একটি হ্যান্ডলার পদ্ধতি সংজ্ঞায়িত করুন যা এই রাষ্ট্রের পরিবর্তনশীলকে সত্যে সেট করবে:

   handleTitleInputSubmit() {
     this.setState(focusDescriptionInput: true);
   }

3. প্রবেশ করার পরে / প্রবেশ করার পরে / পাশ করে TitleInput, আমরা কল করব handleTitleInputSubmit। এটি focusDescriptionInputসত্য হয়ে যাবে।

   <TextInput 
      style = {styles.titleInput}
      returnKeyType = {"next"}
      autoFocus = {true}
      placeholder = "Title" 
      onSubmitEditing={this.handleTitleInputSubmit}
   />

4. DescriptionInputএর focusপ্রপস আমাদের focusDescriptionInputরাষ্ট্র পরিবর্তনশীলে সেট করা আছে । সুতরাং, যখন focusDescriptionInputপরিবর্তনগুলি (3 ধাপে) DescriptionInputপুনরায় রেন্ডার হবে focus={true}।

   <TextInput
      style = {styles.descriptionInput}          
      multiline = {true}
      maxLength = {200}
      placeholder = "Description" 
      focus={this.state.focusDescriptionInput}
   />

রেফগুলি ব্যবহার এড়াতে এটি একটি দুর্দান্ত উপায়, যেহেতু রেফগুলি আরও ভঙ্গুর কোডের দিকে নিয়ে যেতে পারে :)

সম্পাদনা করুন: hane / t থেকে @LaneRettig এ নির্দেশ করার জন্য যে আপনাকে প্রতিক্রিয়া জানাতে কিছু যুক্ত প্রসেস এবং পদ্ধতিগুলি দিয়ে রিএ্যাক্ট নেটিভ টেক্সট ইনপুটটি মোড়তে হবে focus:

    // Props:
    static propTypes = { 
        focus: PropTypes.bool,
    } 

    static defaultProps = { 
        focus: false,
    } 

    // Methods:
    focus() {
        this._component.focus(); 
    } 

    componentWillReceiveProps(nextProps) {
        const {focus} = nextProps; 

        focus && this.focus(); 
    }

Comments

@ লেনরেটিগ আপনি সম্পূর্ণরূপে ঠিক বলেছেন - এটি উল্লেখ করার জন্য ধন্যবাদ। আমরা কিছু যুক্ত প্রসেস এবং পদ্ধতিগুলি দিয়ে আরএন টেক্সটইনপুটটিকে আবৃত করি - দয়া করে উত্তর ডাব্লু / সেগুলি সংযোজনের নীচের অংশটি দেখুন এবং আপনার আরও কোনও সমস্যা আছে কিনা তা আমাকে জানান!

— স্টেডম্যান ব্লেক

কুল। আপনার এটি আরএন-তে PR হিসাবে জমা দেওয়া উচিত। আমি অবাক হয়েছি এটি ইতিমধ্যে বাক্সের বাইরে সমর্থিত নয়।

— লেন রেটিগ

আপনি কিবোর্ডের পাশে ক্লিক করেন এবং তারপরে সরাসরি প্রথম ইনপুটটিতে ক্লিক করুন? ফোকাস দ্বিতীয়টিতে ফিরে যায় যা সেই সমাধানের সাথে খারাপ অভিজ্ঞতা হয়

— পাইওটর

আমি এই সমাধানটি বিশেষত পছন্দ করি না, কারণ এটি 5-6 উপাদানগুলির সামান্য দীর্ঘতর ফর্মগুলির জন্য ভাল স্কেল করে না, যেখানে আপনার প্রতিটি উপাদানগুলির জন্য রাজ্যে ফোকাস বুলিয়ান প্রয়োজন এবং সেগুলি অনুযায়ী সমস্ত পরিচালনা করুন।

— ডেভিডগোলি

মজার বিষয় হচ্ছে, ডকগুলি আরও জানিয়েছে: "রেফের জন্য কয়েকটি ভাল ব্যবহারের কেস রয়েছে: ফোকাস পরিচালনা, পাঠ্য নির্বাচন বা মিডিয়া প্লেব্যাক পরিচালনা করা ..." সুতরাং এই ক্ষেত্রে, পাঠ্য ইনপুটকে ফোকাস করার জন্য রেফ ব্যবহার করা সরঞ্জামটির বৈধ ব্যবহার হতে পারে ।

— নোহ অ্যালেন

Answer 3

নেটিভ 0.3% এর প্রতিক্রিয়া অনুসারে, focus()কোনও পাঠ্য ইনপুট নোডে কলিং (অন্যান্য বেশ কয়েকটি জবাব হিসাবে পরামর্শ দেওয়া হয়েছে) আর সমর্থন করে না। পরিবর্তে, আপনি TextInputStateপ্রতিক্রিয়া নেটিভ থেকে মডিউলটি ব্যবহার করতে পারেন । এটিকে আরও সহজ করতে আমি নিম্নলিখিত সহায়ক মডিউলটি তৈরি করেছি:

// TextInputManager
//
// Provides helper functions for managing the focus state of text
// inputs. This is a hack! You are supposed to be able to call
// "focus()" directly on TextInput nodes, but that doesn't seem
// to be working as of ReactNative 0.36
//
import { findNodeHandle } from 'react-native'
import TextInputState from 'react-native/lib/TextInputState'


export function focusTextInput(node) {
  try {
    TextInputState.focusTextInput(findNodeHandle(node))
  } catch(e) {
    console.log("Couldn't focus text input: ", e.message)
  }
}

তারপরে আপনি focusTextInputকোনওটির "রেফ" এ ফাংশনটি কল করতে পারেন TextInput। উদাহরণ স্বরূপ:

...
<TextInput onSubmit={() => focusTextInput(this.refs.inputB)} />
<TextInput ref="inputB" />
...

Comments

দুর্দান্ত কাজ করে তবে কেউ যদি রিডেক্স-ফর্ম ব্যবহার করে তবে এ জাতীয় কিছু করা উচিত। <Field ... onSubmitEditing={() => focusTextInput(this._password)} />এবং রেফ এর মতো হওয়া উচিত<Field ... withRef refName={e => this._password = e}/>

— তারকানলার

এই কাজটি করতে আমাকে 'onSubmitEditing' ব্যবহার করতে হয়েছিল তবে দুর্দান্ত সমাধানটি কম নয়।

— অ্যাডাম জাকিয়েলা

0.42 এ দুর্দান্ত কাজ করে।

— লরেন্স 21

@ টারকানলারের সমাধানের জন্য আপনি কোড স্নিপেট শেয়ার করতে পারবেন? রিডেক্স-ফর্ম ফিল্ডটি ব্যবহার করার সময় আমি ফোকাস করতে পারছি না, কেবল টেক্সটইনপুট কাজ করে, সূক্ষ্ম

— জাসান

calling focus() on a text input node isn't supported any more=> সাহসী দাবি, উত্স? focus()V0.49.5 + এর সাথে কলিং ঠিকঠাক কাজ করে এবং এর সাথে উল্লেখ করা TextInputStateহয় না : facebook.github.io/react-native/releases/next/docs/…focus()blur()

— tanguy_k

Answer 4

আমি একটি ছোট লাইব্রেরি তৈরি করেছি যা এটি করে, আপনার মোড়ানো দৃশ্য এবং টেক্সটইনপুট আমদানি প্রতিস্থাপনের পরিবর্তে কোনও কোড পরিবর্তনের প্রয়োজন নেই:

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

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

https://github.com/zackify/react-native-autofocus

এখানে বিস্তারিত ব্যাখ্যা করা হয়েছে: https://zach.codes/autofocus-inputs-in-react-native/

Comments

এই ফলাফলটি অর্জনের জন্য দুর্দান্ত প্যাটার্ন। ব্যবহারের স্বাচ্ছন্দ্য অবস্থান থেকে শীর্ষ উত্তর হওয়া উচিত। দেখে মনে হচ্ছে এখনও আপনার ফর্ম ইনপুটগুলির সাথে কাজ করতে আমি আমার কাস্টম ফর্ম ইনপুট (টেক্সটইনপুট এক্সটেনশনগুলি) সহজেই সম্পাদনা করতে পারি। মনে আছে যদি আমি আপনার উত্তরে এটি অন্তর্ভুক্ত করি তবে আরও উদাহরণের জন্য?

— জ্যাক রবসন

নিশ্চিত! আমি জানি ... আমি এটি অন্যান্য জনপ্রিয় পোস্টে পোস্ট করেছি তবে সদৃশগুলির জন্য সমস্যায় পড়েছি। শুধু সাহায্যের চেষ্টা করছি কারণ আমি জানি এই সমস্যাটি কতটা বিরক্তিকর !!

— জ্যাকিফাই করুন

একে অপরের ঠিক পরে যদি আপনার কাছে গুচ্ছ টেক্সটইনপুট থাকে তবে আপনি যদি তাদের মধ্যে স্টাইলিং যুক্ত করতে চান তবে এটি ভেঙে যায়। যদিও অবদানের জন্য ধন্যবাদ।

— জেনেরিক জ্যাম

কোড সামঞ্জস্য করুন নির্দ্বিধায়। আমি নিশ্চিত যে আপনি এমন একটি উপায় তৈরি করতে পারেন যা পাঠ্য ইনপুট নয় এমন উপাদানগুলির উপর থেকে যায়। খুব বেশি কঠিন কাজ করা উচিত নয়।

— ই

এটি আরএন@০.৪7.২ উত্পাদনের জন্য তৈরি করে না

— ফিল অ্যান্ড্রুজ

Answer 5

ভাবলাম একটি ফাংশন উপাদান ব্যবহার করে আমার সমাধান ভাগ হবে ... ' এই ' প্রয়োজন না!

16.12.0 প্রতিক্রিয়া করুন এবং নেটিভ 0.61.5 প্রতিক্রিয়া

এখানে আমার উপাদানটির একটি উদাহরণ রয়েছে:

import React, { useRef } from 'react'
...


const MyFormComponent = () => {

  const ref_input2 = useRef();
  const ref_input3 = useRef();

  return (
    <>
      <TextInput
        placeholder="Input1"
        autoFocus={true}
        returnKeyType="next"
        onSubmitEditing={() => ref_input2.current.focus()}
      />
      <TextInput
        placeholder="Input2"
        returnKeyType="next"
        onSubmitEditing={() => ref_input3.current.focus()}
        ref={ref_input2}
      />
      <TextInput
        placeholder="Input3"
        ref={ref_input3}
      />
    </>
  )
}

আমি জানি, আশা করি এটি কারও সাহায্য করবে =)

Comments

কাজ করছে না. অপরিজ্ঞাপিত _this2.ref_input2.c موجودہ মূল্যায়ন করতে আপত্তি নয়, দয়া করে সহায়তা করুন

— ডিইপি অ্যাডিয়া

আপনি কি আপনার কোডের আরও একটি সম্পূর্ণ উদাহরণ প্রদান করতে পারেন?

— এলি জনসন

ক্রিয়েটরিফের চেয়ে ফাংশনাল উপাদানগুলিতে ইউজারিফ ব্যবহার করা আরও ভাল

— hyuk lee

@ হিউক্লি আপনি সত্যই স্যার, আমি আপডেট করেছি ... মাথা উঁচু করার জন্য ধন্যবাদ! চিয়ার্স!

— এলি জনসন

যারা সর্বশেষ প্রতিক্রিয়া আপডেটগুলি বজায় রাখতে পছন্দ করেন তাদের জন্য এটি উত্তর।

— যোখেন

Answer 6

রিএ্যাক্ট-নেটিভ 0.45.1 ব্যবহার করে ব্যবহারকারীর নাম টেক্সটইনপুটটিতে রিটার্ন কী টিপানোর পরে পাসওয়ার্ড টেক্সট ইনপুটটিতে ফোকাস সেট করার চেষ্টা করতেও আমি সমস্যার মুখোমুখি হয়েছিল।

এখানে শীর্ষস্থানীয় রেটযুক্ত সমাধানগুলির বেশিরভাগ চেষ্টা করার পরে আমি গিথুব সম্পর্কিত একটি সমাধান পেয়েছি যা আমার চাহিদা পূরণ করেছে: https://github.com/shoutem/ui/issues/44#issuecomment-290724642

এটি যোগ করা:

import React, { Component } from 'react';
import { TextInput as RNTextInput } from 'react-native';

export default class TextInput extends Component {
    render() {
        const { props } = this;

        return (
            <RNTextInput
                {...props}
                ref={(input) => props.inputRef && props.inputRef(input)}
            />
        );
    }
}

এবং তারপরে আমি এটি এটির মতো ব্যবহার করি:

import React, {Component} from 'react';
import {
    View,
} from 'react-native';
import TextInput from "../../components/TextInput";

class Login extends Component {
    constructor(props) {
        super(props);
        this.passTextInput = null
    }

    render() {
        return (
            <View style={{flex:1}}>
                <TextInput
                    style={{flex:1}}
                    placeholder="Username"
                    onSubmitEditing={(event) => {
                        this.passTextInput.focus()
                    }}
                />

                <TextInput
                    style={{flex:1}}
                    placeholder="Password"
                    inputRef={(input) => {
                        this.passTextInput = input
                    }}
                />
            </View>
        )
    }
}

Comments

আপনি আমার জীবন বাঁচান:)

— টোকিনোনগরে

আপনি কেবল এতে নাম পরিবর্তন refকরেছেন inputRef... আপনি আপনার সম্পূর্ণ কাস্টম উপাদানটি ফেলে দিতে পারেন এবং আপনি ব্যবহারে ফিরে যাবেন আপনার দ্বিতীয় কোড ব্লকটি ততক্ষণ কাজ করবেref

— জেসন টোলিভার

Answer 7

আরএন 0.50.3 এ আমার পক্ষে এটি সম্ভব:

<TextInput 
  autoFocus={true} 
  onSubmitEditing={() => {this.PasswordInputRef._root.focus()}} 
/>

<TextInput ref={input => {this.PasswordInputRef = input}} />

আপনাকে অবশ্যই এটি দেখতে হবে assপ্যাসওয়ার্ডইনপুটফ _রোট .ফোকাস ()

Comments

এটি 'নেটিভ-বেস' নির্দিষ্ট

— বিকাশ

Answer 8

আপনি যদি আমার tcomb-form-nativeমতো ব্যবহার করতে চান তবে আপনি এটিও করতে পারেন। কৌশলটি এখানে: TextInputসরাসরি প্রপস সেট করার পরিবর্তে , আপনি এটি মাধ্যমে করুন options। আপনি ফর্মের ক্ষেত্রগুলি উল্লেখ করতে পারেন:

this.refs.form.getComponent('password').refs.input.focus()

সুতরাং চূড়ান্ত পণ্যটি দেখতে এমন কিছু দেখাচ্ছে:

var t = require('tcomb-form-native');
var Form = t.form.Form;

var MyForm = t.struct({
  field1:     t.String,
  field2:     t.String,
});

var MyComponent = React.createClass({

  _getFormOptions () {
    return {
      fields: {
        field1: {
          returnKeyType: 'next',
          onSubmitEditing: () => {this.refs.form.getComponent('field2').refs.input.focus()},
        },
      },
    };
  },

  render () {

    var formOptions = this._getFormOptions();

    return (
      <View style={styles.container}>
        <Form ref="form" type={MyForm} options={formOptions}/>
      </View>
    );
  },
});

(এই ধারণাটি পোস্ট করার জন্য রিমোক্যাঙ্কারের কাছে ক্রেডিট: https://github.com/gcanti/tcomb-form-native/issues/96 )

Comments

কীভাবে আমি সাবমিট এডিটিংয়ে ফাংশন কল করব? উদাহরণস্বরূপ: আমি লগইন () ফাংশনটিতে কল করতে চাই যখন ব্যবহারকারী শেষ টেক্সটপুটটির রিটার্নকিটাইপ 'সম্পন্ন' করে press

— চেতন

Answer 9

এইভাবেই আমি এটি অর্জন করেছি। এবং নীচের উদাহরণটিতে প্রতিক্রিয়া 16.3 তে প্রবর্তিত React.createRef () API ব্যবহার করা হয়েছে।

class Test extends React.Component {
  constructor(props) {
    super(props);
    this.secondTextInputRef = React.createRef();
  }

  render() {
    return(
        <View>
            <TextInput
                placeholder = "FirstTextInput"
                returnKeyType="next"
                onSubmitEditing={() => { this.secondTextInputRef.current.focus(); }}
            />
            <TextInput
                ref={this.secondTextInputRef}
                placeholder = "secondTextInput"
            />
        </View>
    );
  }
}

আমি মনে করি এটি আপনাকে সাহায্য করবে।

Comments

বর্তমানের উদ্দেশ্য কী?

— অ্যাডাম কাটজ

Answer 10

আমার দর্শনটি হ'ল <কাস্টমবোলডোনসেক্সটপুট /> একটি আরএন <টেক্সটইনপুট /> মোড়ানো ।

আমি এই সমস্যাটিকে নিম্নলিখিত হিসাবে সমাধান করেছি:

আমার ফর্মটি দেখতে দেখতে:

  <CustomBoladonesTextInput 
      onSubmitEditing={() => this.customInput2.refs.innerTextInput2.focus()}
      returnKeyType="next"
      ... />

  <CustomBoladonesTextInput 
       ref={ref => this.customInput2 = ref}
       refInner="innerTextInput2"
       ... />

কাস্টমবোলডোনসেক্সট ইনপুটটির উপাদান সংজ্ঞাতে, আমি রেফফিল্ডটি অভ্যন্তরীণ রেফ প্রোপটিতে এভাবে প্রেরণ করি:

   export default class CustomBoladonesTextInput extends React.Component {
      render() {        
         return (< TextInput ref={this.props.refInner} ... />);     
      } 
   }

এবং voila। সবকিছু ফিরে পেতে আবার কাজ করে। আশাকরি এটা সাহায্য করবে

Answer 11

রিএ্যাক্ট নেটিভের গিটহাব ইস্যুতে এই সমাধানটি ব্যবহার করে দেখুন।

https://github.com/facebook/react-native/pull/2149#issuecomment-129262565

টেক্সটইনপুট উপাদানটির জন্য আপনাকে রেফ প্রপ ব্যবহার করতে হবে।
তারপরে আপনাকে এমন একটি ফাংশন তৈরি করতে হবে যা অনসামিত এডিটিং প্রপকে ডেকে আনে যা দ্বিতীয় পাঠ্য ইনপুট রেফটিতে ফোকাস সরিয়ে দেয়।

var InputScreen = React.createClass({
    _focusNextField(nextField) {
        this.refs[nextField].focus()
    },

    render: function() {
        return (
            <View style={styles.container}>
                <TextInput
                    ref='1'
                    style={styles.input}
                    placeholder='Normal'
                    returnKeyType='next'
                    blurOnSubmit={false}
                    onSubmitEditing={() => this._focusNextField('2')}
                />
                <TextInput
                    ref='2'
                    style={styles.input}
                    keyboardType='email-address'
                    placeholder='Email Address'
                    returnKeyType='next'
                    blurOnSubmit={false}
                    onSubmitEditing={() => this._focusNextField('3')}
                />
                <TextInput
                    ref='3'
                    style={styles.input}
                    keyboardType='url'
                    placeholder='URL'
                    returnKeyType='next'
                    blurOnSubmit={false}
                    onSubmitEditing={() => this._focusNextField('4')}
                />
                <TextInput
                    ref='4'
                    style={styles.input}
                    keyboardType='numeric'
                    placeholder='Numeric'
                    blurOnSubmit={false}
                    onSubmitEditing={() => this._focusNextField('5')}
                />
                <TextInput
                    ref='5'
                    style={styles.input}
                    keyboardType='numbers-and-punctuation'
                    placeholder='Numbers & Punctuation'
                    returnKeyType='done'
                />
            </View>
        );
    }
});

Comments

আপনার উত্তরের লিঙ্ক থেকে আপেক্ষিক তথ্য অন্তর্ভুক্ত করুন।

— ওয়েস ফস্টার 4

মনে রাখবেন যে স্ট্রিং রেফগুলি অবচিত হয়ে যেতে পারে তাই ভবিষ্যতে এই সমাধানটি কাজ করতে পারে না: "... যদিও স্ট্রিং রেফগুলি অবচিত নয়, তবে তারা উত্তরাধিকার হিসাবে বিবেচিত হবে, এবং সম্ভবত ভবিষ্যতে কোনও কোনও সময়ে অবচিত হবে Call কলব্যাক রেফগুলি হ'ল পছন্দের। " - ফেসবুক.

— github.io/react/docs/more-about-refs.html

V0.36 হিসাবে এটি আর কাজ করে না। উপাদানটিতে কোনও পদ্ধতি "ফোকাস" নেই। আমাদের এখন এটি করা উচিত? আপনি উত্তর আপডেট করতে পারেন?

— মিচ

@ মিচ নিশ্চিত না যে এটি ০.০৯.২-এ ফিরে এসেছে কিনা তবে এটি এখন ভাল কাজ করে।

— এলেডশেল

Answer 12

লিগ্যাসি স্ট্রিং রেফের পরিবর্তে কলব্যাক রেফ ব্যবহার করা :

<TextInput
    style = {styles.titleInput}
    returnKeyType = {"next"}
    autoFocus = {true}
    placeholder = "Title"
    onSubmitEditing={() => {this.nextInput.focus()}}
/>
<TextInput
    style = {styles.descriptionInput}  
    multiline = {true}
    maxLength = {200}
    placeholder = "Description"
    ref={nextInput => this.nextInput = nextInput}
/>

Comments

ফোকাস-পদ্ধতিটি পাঠ্য ইনপুট থেকে সরানো হয়েছে বলে কাজ করে না।

— জ্যাকব লরিজেন

Answer 13

<TextInput 
    keyboardType="email-address"
    placeholder="Email"
    returnKeyType="next"
    ref="email"
    onSubmitEditing={() => this.focusTextInput(this.refs.password)}
    blurOnSubmit={false}
 />
<TextInput
    ref="password"
    placeholder="Password" 
    secureTextEntry={true} />

এবং onSubmitEditing={() => this.focusTextInput(this.refs.password)}নীচের হিসাবে জন্য পদ্ধতি যুক্ত করুন :

private focusTextInput(node: any) {
    node.focus();
}

Answer 14

যদি আপনার TextInputঅন্য উপাদানটির ভিতরে থাকে তবে গৃহীত সমাধানটির জন্য , আপনাকে refপ্যারেন্ট পাত্রে রেফারেন্সটি "পপ" করতে হবে ।

// MyComponent
render() {
    <View>
        <TextInput ref={(r) => this.props.onRef(r)} { ...this.props }/>
    </View>
}

// MyView
render() {
    <MyComponent onSubmitEditing={(evt) => this.myField2.focus()}/>
    <MyComponent onRef={(r) => this.myField2 = r}/>
}

Comments

হাই @ এডেলশেল, আমি একই জিনিসটি অর্জন করতে চাই, তবে আপনার নমুনাটি বাছাই করতে পারিনি, আপনি কি আমাদের কোনও ইঙ্গিত দেখিয়ে দিতে চান?

— সিলিয়াং

আমি মনে করি এটির সঠিক উত্তর হওয়া উচিত। আমি এটি অনুসরণ করি এবং এটি কার্যকর হয়।

— ডেভিড চেং

এই দুটি একই ফাইল হয়?

— মোরালকোড

Answer 15

আপনার উপাদান:

constructor(props) {
        super(props);
        this.focusNextField = this
            .focusNextField
            .bind(this);
        // to store our input refs
        this.inputs = {};
    }
    focusNextField(id) {
        console.log("focus next input: " + id);
        this
            .inputs[id]
            ._root
            .focus();
    }

দ্রষ্টব্য: আমি ব্যবহার করেছি ._rootকারণ এটি নেটিভবেস 'লাইব্রেরি' ইনপুটটিতে টেক্সট ইনপুটটির একটি রেফ

এবং আপনার পাঠ্যের ইনপুটগুলিতে এটি

<TextInput
         onSubmitEditing={() => {
                          this.focusNextField('two');
                          }}
         returnKeyType="next"
         blurOnSubmit={false}/>


<TextInput      
         ref={input => {
              this.inputs['two'] = input;
                        }}/>

Answer 16

<TextInput placeholder="Nombre"
    ref="1"
    editable={true}
    returnKeyType="next"
    underlineColorAndroid={'#4DB6AC'}
    blurOnSubmit={false}
    value={this.state.First_Name}
    onChangeText={First_Name => this.setState({ First_Name })}
    onSubmitEditing={() => this.focusNextField('2')}
    placeholderTextColor="#797a7a" style={{ marginBottom: 10, color: '#808080', fontSize: 15, width: '100%', }} />

<TextInput placeholder="Apellido"
    ref="2"
    editable={true}
    returnKeyType="next"
    underlineColorAndroid={'#4DB6AC'}
    blurOnSubmit={false}
    value={this.state.Last_Name}
    onChangeText={Last_Name => this.setState({ Last_Name })}
    onSubmitEditing={() => this.focusNextField('3')}
    placeholderTextColor="#797a7a" style={{ marginBottom: 10, color: '#808080', fontSize: 15, width: '100%', }} />

এবং পদ্ধতি যুক্ত করুন

focusNextField(nextField) {
    this.refs[nextField].focus();
}

Comments

খুব ঝরঝরে অ্যাপ্রোচ।

— সিরাজ আলম

পুরানো উত্তর কিন্তু কারও কি জানেন যে এই উত্তরটির মতো কোনও কার্যকরী (রাষ্ট্রবিহীন) উপাদানটিতে সমস্ত রেফ অ্যাক্সেস করা সম্ভব?

— ডগলাস শ্মিট

Answer 17

ক্যাপচার একটি উপায় নেই ট্যাব একটি TextInput। এটি হ্যাকি, তবে কিছুই না থেকে ভাল ।

একটি নির্ধারণ onChangeTextহ্যান্ডলার পুরানো সাথে নতুন ইনপুট মান তুলনা, একটি চেক \t। যদি একটিটি পাওয়া যায় তবে @ বোর্ডগেমস হিসাবে প্রদর্শিত ক্ষেত্রটি অগ্রসর করুন

ভেরিয়েবলটি usernameব্যবহারকারীর নামটির মান রয়েছে setUsernameএবং এটি স্টোরে পরিবর্তন করার জন্য একটি ক্রিয়া প্রেরণ করে (উপাদান উপাদান, রিডেক্স স্টোর, ইত্যাদি), এই জাতীয় কিছু করুন:

function tabGuard (newValue, oldValue, callback, nextCallback) {
  if (newValue.indexOf('\t') >= 0 && oldValue.indexOf('\t') === -1) {
    callback(oldValue)
    nextCallback()
  } else {
    callback(newValue)
  }
}

class LoginScene {
  focusNextField = (nextField) => {
    this.refs[nextField].focus()
  }

  focusOnPassword = () => {
    this.focusNextField('password')
  }

  handleUsernameChange = (newValue) => {
    const { username } = this.props            // or from wherever
    const { setUsername } = this.props.actions // or from wherever

    tabGuard(newValue, username, setUsername, this.focusOnPassword)
  }

  render () {
    const { username } = this.props

    return (
      <TextInput ref='username'
                 placeholder='Username'
                 autoCapitalize='none'
                 autoCorrect={false}
                 autoFocus
                 keyboardType='email-address'
                 onChangeText={handleUsernameChange}
                 blurOnSubmit={false}
                 onSubmitEditing={focusOnPassword}
                 value={username} />
    )
  }
}

Comments

এটি শারীরিক কীবোর্ড ব্যবহার করে আমার পক্ষে কাজ করে না। onChangeText ইভেন্টটি ট্যাবে আগুন দেয় না।

— বুফ্কে

Answer 18

ফোকাস সম্পত্তি রয়েছে এমন একটি ইনপুট উপাদানটির জন্য এখানে একটি রিএজেন্ট সমাধান।

যতক্ষণ না এই প্রপটি সত্য হিসাবে সেট করা যায় ততক্ষণ ক্ষেত্রটি ফোকাস করা হবে এবং যতক্ষণ না এটি মিথ্যা ততক্ষণ ফোকাস থাকবে না।

দুর্ভাগ্যক্রমে এই উপাদানটির একটি হওয়া দরকার: রেফ সংজ্ঞায়িত, আমি এটিতে ফোকাস () কল করার অন্য কোনও উপায় খুঁজে পাইনি। আমি পরামর্শ সম্পর্কে খুশি।

(defn focusable-input [init-attrs]
  (r/create-class
    {:display-name "focusable-input"
     :component-will-receive-props
       (fn [this new-argv]
         (let [ref-c (aget this "refs" (:ref init-attrs))
               focus (:focus (ru/extract-props new-argv))
               is-focused (.isFocused ref-c)]
           (if focus
             (when-not is-focused (.focus ref-c))
             (when is-focused (.blur ref-c)))))
     :reagent-render
       (fn [attrs]
         (let [init-focus (:focus init-attrs)
               auto-focus (or (:auto-focus attrs) init-focus)
               attrs (assoc attrs :auto-focus auto-focus)]
           [input attrs]))}))

https://gist.github.com/Knotschi/6f97efe89681ac149113ddec4c396cc5

Comments

@ বাপ - এটি ক্লজুরস্ক্রিপ্ট। রিএজেন্ট প্রতিক্রিয়া জানাতে বাধ্য is যদি আপনি কৌতূহলী হন তবে প্রতিক্রিয়াটির জন্য এটি দুর্দান্ত একটি ম্যাচ কারণ আপনি যদি কোনও লিপ্পের জন্য প্রস্তুত থাকেন তবে রাষ্ট্রীয় আপডেটগুলি কেবলমাত্র swap!কোনও atomধরণের স্পষ্ট কলের মতো জিনিসগুলির সাথেই সম্ভব । দস্তাবেজ অনুসারে, প্রতিক্রিয়াটির সাথে আবদ্ধ হওয়ার জন্য এটি ব্যবহার করা হয়: "যে কোনও উপাদান যা পরমাণু ব্যবহার করে তা স্বয়ংক্রিয়ভাবে পুনরায় রেন্ডার হয় যখন এর মান পরিবর্তন হয়।" reagent-project.github.io

— ডেল

Answer 19

আপনি যদি নেটিভবেসকে ইউআই উপাদান হিসাবে ব্যবহার করেন তবে আপনি এই নমুনাটি ব্যবহার করতে পারেন

<Item floatingLabel>
    <Label>Title</Label>
    <Input
        returnKeyType = {"next"}
        autoFocus = {true}
        onSubmitEditing={(event) => {
            this._inputDesc._root.focus(); 
        }} />
</Item>
<Item floatingLabel>
    <Label>Description</Label>
    <Input
        getRef={(c) => this._inputDesc = c}
        multiline={true} style={{height: 100}} />
        onSubmitEditing={(event) => { this._inputLink._root.focus(); }} />
</Item>