प्रतिक्रियाशील मूल: "अगला" कीबोर्ड बटन दबाने के बाद अगले टेक्स्टइंपुट का चयन कैसे करें?


201

मैंने दो TextInput फ़ील्ड को निम्नानुसार परिभाषित किया:

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

लेकिन मेरे कीबोर्ड पर "अगला" बटन दबाने के बाद, मेरा प्रतिक्रिया-मूल एप्लिकेशन दूसरे TextInput फ़ील्ड पर नहीं जा रहा है। मैं उसे कैसे प्राप्त कर सकता हूं?

धन्यवाद!


मिच का जवाब (वर्तमान में 3 एक नीचे) मेरे लिए v0.42 पर काम करता है।
लॉरेंस

प्रतिक्रिया v16.8.0या इसके बाद के संस्करण के लोगों के लिए मैं नीचे की ओर @ एली जॉनसन द्वारा प्रदान किए गए उत्तर की सिफारिश करूंगा। प्रतिक्रिया ने refनीचे दिए गए समाधानों में प्रदान किए गए कई उपयोगों को हटा दिया है ।
thedeg123

जवाबों:


331

दूसरे सेट TextInputफोकस, जब पिछले TextInputके onSubmitEditingशुरू हो रहा है।

इसे इस्तेमाल करे

  1. दूसरे TextInput के लिए एक रेफरी जोड़ना
    ref={(input) => { this.secondTextInput = input; }}

  2. पहले TextInput onSubmitEditing इवेंट पर ध्यान केंद्रित करें ।
    onSubmitEditing={() => { this.secondTextInput.focus(); }}

  3. कीबोर्ड की झिलमिलाहट को रोकने के लिए, bluOnSubmit को झूठा सेट करना याद रखें।
    blurOnSubmit={false}

जब सब पूरा हो जाए, तो इसे ऐसा दिखना चाहिए।

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

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

53
उल्लेख के लायक, कि onSubmitEditingकॉलबैक blurघटना के बाद कहा जाता है । अगर कीबोर्ड तुरंत अगले तत्व पर केंद्रित होता है, तो पागल हो सकता है। तो यह blurOnSubmit={false}सभी तत्वों को फॉर्म में सेट करने में मददगार हो सकता है, लेकिन trueअंतिम तत्व को छोड़ कर , Done बटन को अंतिम इनपुट को धुंधला करने की अनुमति देता है ।
e1dar

9
यह v0.36 के रूप में अब और काम नहीं करता है। घटक पर कोई विधि "फोकस" नहीं है। अब हमें यह कैसे करना चाहिए?
मिच

4
@ मिच 0.40.0 पर ठीक काम करता है। आपके द्वारा चलाए जा रहे संस्करण में बग हो सकता है।
विक्की

3
RN 0.49 का उपयोग करते हुए, blurOnSubmit={false}कीबोर्ड फ़्लिकरिंग को रोकने के लिए जोड़ने से यह काम करना बंद कर देता है, कोई भी जो जानता है कि क्या चल रहा है?
नबील लन्दन

13
जो कोई भी focusकाम करने का प्रबंधन नहीं कर सका , वह सुनिश्चित करें कि आप TextInputघटक के लिए एक आवरण का उपयोग न करें । यदि आपके पास एक ऐसा CustomTextInputघटक है जो लपेटता है TextInput, तो आपको TextInputउस घटक के लिए धब्बा और फ़ोकस विधियों को लागू करने की आवश्यकता होती है, इसलिए यह अपेक्षा के अनुरूप काम करेगा।

65

आप रिफल्स का उपयोग किए बिना ऐसा कर सकते हैं । यह दृष्टिकोण पसंद किया जाता है, क्योंकि refs नाजुक कोड हो सकता हैप्रतिक्रिया डॉक्स जहां संभव अन्य समाधान ढूँढने सलाह:

यदि आपने रिएक्ट के साथ कई एप्लिकेशन को प्रोग्राम नहीं किया है, तो आपका पहला झुकाव आमतौर पर आपके ऐप में "चीजों को बनाने" के लिए रीफ्स का उपयोग करने का प्रयास करने वाला है। यदि यह मामला है, तो एक क्षण लें और अधिक गंभीर रूप से सोचें कि घटक पदानुक्रम में राज्य का स्वामित्व कहां होना चाहिए। अक्सर, यह स्पष्ट हो जाता है कि राज्य में "खुद" के लिए उचित स्थान पदानुक्रम में उच्च स्तर पर है। राज्य को वहाँ रखने से अक्सर "चीजों को बनाने" के लिए रेफ का उपयोग करने की कोई इच्छा समाप्त हो जाती है - इसके बजाय, डेटा प्रवाह आमतौर पर आपके लक्ष्य को पूरा करेगा।

इसके बजाय, हम दूसरे इनपुट क्षेत्र पर ध्यान केंद्रित करने के लिए एक राज्य चर का उपयोग करेंगे।

  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's focusप्रोप हमारे focusDescriptionInputराज्य चर पर सेट है । इसलिए, जब focusDescriptionInputपरिवर्तन (चरण 3 में), के DescriptionInputसाथ फिर से प्रस्तुत करना होगा focus={true}

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

यह refs के उपयोग से बचने का एक अच्छा तरीका है, क्योंकि refs अधिक नाजुक कोड को जन्म दे सकता है :)

संपादित करें: h / t @ @aneRettig को इंगित करने के लिए कि आपको कुछ जोड़ा गया सहारा और तरीकों के साथ प्रतिक्रिया मूल पाठइन्पुट को लपेटने की आवश्यकता होगी focus:

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

    static defaultProps = { 
        focus: false,
    } 

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

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

        focus && this.focus(); 
    }

2
@LaneRettig आप पूरी तरह से सही हैं - इसे इंगित करने के लिए धन्यवाद। हम कुछ जोड़े गए प्रॉप्स और तरीकों के साथ RN TextInput को लपेटते हैं - कृपया उत्तर w / उन अतिरिक्त के नीचे देखें और मुझे बताएं कि क्या आपके पास कोई और समस्या है!
स्टेडमैन ब्लेक

4
ठंडा। आपको इसे पीआर के रूप में आरएन को प्रस्तुत करना चाहिए। मुझे आश्चर्य है कि यह पहले से ही बॉक्स से बाहर समर्थित नहीं है।
लेन रेटिग

8
क्या होगा यदि आप कीबोर्ड पर अगला क्लिक करते हैं, और फिर सीधे पहले इनपुट पर क्लिक करते हैं? फ़ोकस दूसरे पर वापस जाता है जो उस समाधान के साथ बुरा अनुभव है
Piotr

3
मुझे यह समाधान पसंद नहीं है, विशेष रूप से, क्योंकि यह 5-6 तत्वों के थोड़े लंबे रूपों के लिए भी अच्छी तरह से स्केल नहीं करता है, जहां आपको प्रत्येक तत्व के लिए राज्य में फ़ोकस बूलियन की आवश्यकता होगी और उन सभी के अनुसार प्रबंधन करना होगा।
दाविदगोली

9
दिलचस्प बात यह है कि डॉक्स यह भी बताता है: "रेफ के लिए कुछ अच्छे उपयोग के मामले हैं: ध्यान केंद्रित करना, पाठ का चयन, या मीडिया प्लेबैक ..." तो इस मामले में, टेक्स्ट इनपुट पर ध्यान केंद्रित करने के लिए रेफ का उपयोग करना उपकरण का एक वैध उपयोग होगा। ।
नूह एलन

26

React Native 0.36 के अनुसार, 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किसी भी "ref" पर फ़ंक्शन को कॉल कर सकते हैं TextInput। उदाहरण के लिए:

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

1
कमाल का काम करता है लेकिन अगर कोई भी redux-form का उपयोग करता है तो उसे कुछ ऐसा करना चाहिए। <Field ... onSubmitEditing={() => focusTextInput(this._password)} />और रेफ कुछ इस तरह होना चाहिए<Field ... withRef refName={e => this._password = e}/>
२१

1
मुझे इस काम को करने के लिए had onSubmitEditing ’का उपयोग करना था लेकिन महान समाधान कोई भी कम नहीं था।
एडम जकीला

3
0.42 में बढ़िया काम करता है।
लॉरेंस

1
@tarkanlar आप समाधान के लिए कोड स्निपेट साझा कर सकते हैं? जब मैं केवल TextInput कार्यों का उपयोग कर,
Redux-

2
calling focus() on a text input node isn't supported any more=> बोल्ड दावा, स्रोत? कॉलिंग focus()काम करता है v0.49.5 के साथ ठीक + TextInputStateजबकि दस्तावेज नहीं है focus()और blur()उल्लेख कर रहे हैं: facebook.github.io/react-native/releases/next/docs/...
tanguy_k

21

मैंने एक छोटा पुस्तकालय बनाया जो ऐसा करता है, आपके रैपिंग व्यू को बदलने और TextInput के आयात के अलावा किसी भी कोड परिवर्तन की आवश्यकता नहीं है:

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/


इस परिणाम को प्राप्त करने के लिए उत्कृष्ट पैटर्न। उपयोग के बिंदु से आसानी से शीर्ष उत्तर होना चाहिए। ऐसा लगता है कि मैं अभी भी अपने कस्टम इनपुट के साथ काम करने के लिए अपने कस्टम फॉर्म इनपुट (TextInput एक्सटेंशन) को आसानी से संपादित कर सकता हूं। मन अगर मैं इसे आपके जवाब में शामिल करूं तो आगे के उदाहरण के लिए?
जैक रॉबसन

ज़रूर! मुझे पता है ... मैंने इस बारे में अन्य लोकप्रिय पोस्ट पर पोस्ट किया लेकिन डुप्लिकेट के लिए मुसीबत में पड़ गया। बस मदद करने की कोशिश कर रहा हूं क्योंकि मुझे पता है कि यह समस्या कितनी कष्टप्रद है !!
zackify

यह बहुत अच्छा है यदि आपके पास एक-दूसरे के ठीक बाद TextInputs का एक गुच्छा है, लेकिन यदि आप उनके बीच स्टाइल जोड़ना चाहते हैं तो यह टूट जाता है। हालांकि योगदान के लिए धन्यवाद।
जेनेरिकजैम

कोड को समायोजित करने के लिए स्वतंत्र महसूस करें। मुझे यकीन है कि आप एक ऐसा रास्ता बना सकते हैं जो उन तत्वों पर छोड़ देगा जो पाठ इनपुट नहीं हैं। करने के लिए बहुत मुश्किल नहीं होना चाहिए।
zackify

1
यह उत्पादन RN@0.47.2 के लिए निर्माण नहीं करता है
फिल एंड्रयूज

18

सोचा था कि मैं एक फ़ंक्शन घटक का उपयोग करके अपना समाधान साझा करूंगा ... ' यह ' आवश्यक नहीं है!

प्रतिक्रिया 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}
      />
    </>
  )
}

मुझे पता नहीं, उम्मीद है कि यह किसी को मदद करता है =)


1
काम नहीं कर रहा। अपरिभाषित वस्तु का मूल्यांकन नहीं है _this2.ref_input2.current, कृपया मदद करें
DEEP ADHIYA

क्या आप अपने कोड का अधिक पूर्ण उदाहरण प्रदान कर सकते हैं?
एली जॉनसन

2
कार्यात्मक घटक में उपयोग करने के लिए बेहतर हो सकता है createRef की तुलना में कार्यात्मक घटक
hyuk lee

@ युकली आप वास्तव में सही हैं सर, मैंने अपडेट किया है ... सिर के लिए धन्यवाद! चीयर्स!
एली जॉनसन

उन लोगों के लिए जो नवीनतम प्रतिक्रिया अपडेट के साथ रखना पसंद करते हैं, यह द ANSWER है।
योकेन

13

प्रतिक्रिया-मूल 0.45.1 का उपयोग करते हुए मुझे एक उपयोगकर्ता नाम TextInput पर वापसी कुंजी दबाने के बाद एक पासवर्ड TextInput पर ध्यान केंद्रित करने की कोशिश करने में भी समस्याओं का सामना करना पड़ा।

एसओ पर यहां शीर्ष रेटेड समाधानों में से अधिकांश का प्रयास करने के बाद, मैंने जीथब पर एक समाधान पाया जो मेरी आवश्यकताओं को पूरा करता है: 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>
        )
    }
}

तुम मेरी जान बचाओ
:)

1
आपने केवल नाम बदल दिया refहै inputRef... आप अपने पूरे कस्टम घटक को छोड़ सकते हैं और आपका दूसरा कोड ब्लॉक तब तक काम करेगा जब तक कि आप वापस उपयोग करने के लिए वापस नहीं आ जाते हैंref
जेसन टोलिवर

9

RN 0.50.3 पर मेरे लिए यह इस तरह से संभव है:

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

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

आपको यह देखना होगा। PasswordInputRef _root .focus ()


1
यह 'देशी आधार' विशिष्ट है
Developia

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 )


मैं फंक्शन ऑन कॉल कैसे करूं? पूर्व के लिए: जब उपयोगकर्ता अंतिम textinput के रिटर्नकीटाइप 'किया' को दबाता है, तो मैं लॉगिन () फ़ंक्शन को कॉल करना चाहता हूं।
चेतन

7

इस तरह से मैंने इसे हासिल किया। और नीचे दिए गए उदाहरण ने React.createRef () API को React 16.3 में पेश किया है।

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>
    );
  }
}

मुझे लगता है कि यह आपकी मदद करेगा।


.current का उद्देश्य क्या है?
एडम काटज़

5

मेरा परिदृश्य <CustomBoladonesTextInput /> RN <TextInput /> रैपिंग है

मैंने इस समस्या को इस प्रकार हल किया:

मेरा रूप ऐसा दिखता है:

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

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

CustomBoladonesTextInput की घटक परिभाषा पर, मैं इस तरह रिफ रेफरी को इनर रेफरी पास में भेजता हूं:

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

और वोइला। सब कुछ फिर से काम मिलता है। उम्मीद है की यह मदद करेगा


4

React Native के GitHub मुद्दों पर इस समाधान का प्रयास करें।

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

आपको TextInput घटक के लिए रेफरी प्रोप का उपयोग करने की आवश्यकता है।
फिर आपको एक ऐसा फ़ंक्शन बनाने की आवश्यकता होती है, जिसे onSubmitEditing प्रोप पर बुलाया जाता है, जो फ़ोकस को दूसरे TextInput रेफ पर ले जाता है।

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>
        );
    }
});

कृपया अपने उत्तर में लिंक से संबंधित जानकारी शामिल करें।
वेस फोस्टर

ध्यान रखें कि स्ट्रिंग रेफरी पदावनत हो सकते हैं इसलिए यह समाधान भविष्य में काम नहीं कर सकता है: "... हालांकि स्ट्रिंग रेफरी को पदावनत नहीं किया जाता है, उन्हें विरासत माना जाता है, और संभवतः भविष्य में किसी बिंदु पर पदावनत किया जाएगा। कॉलबैक रिफ। पसंदीदा।" - facebook.github.io/react/docs/more-about-refs.html
yura

1
यह v0.36 के रूप में अब और काम नहीं करता है। घटक पर कोई विधि "फोकस" नहीं है। अब हमें यह कैसे करना चाहिए? क्या आप उत्तर को अपडेट कर सकते हैं?
मिच

@ मिच सुनिश्चित नहीं है अगर यह 0.39.2 पर वापस आ गया है, लेकिन यह अब ठीक काम करता है।
एल्डेलशेल

4

विरासत स्ट्रिंग के बजाय कॉलबैक रिफ का उपयोग करना :

<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}
/>

1
फोकस विधि के रूप में काम नहीं करता है, TextInput से हटा दिया गया है।
जैकब लॉरिटजन

3
<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();
}

2

यदि 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}/>
}

1
हाय @ एल्डशेल, मैं एक ही चीज हासिल करना चाहूंगा, लेकिन अपने नमूने को नहीं छांट सका, क्या आप हमें कोई संकेत देंगे?
सीलियांग

मुझे लगता है कि यह सही उत्तर होना चाहिए। मैं इसका पालन करता हूं और यह काम करता है।
डेविड चेउंग

क्या ये दोनों एक ही फाइल में हैं?
MoralCode

2

आपके घटक में:

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 में एक रेफरी है नेटिवबेस’लॉब्स इनपुट

और इस तरह से अपने पाठ इनपुट में

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


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

2
<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();
}

बहुत साफ दृष्टिकोण।
सिराज आलम

1
पुराना उत्तर लेकिन क्या किसी को पता है कि इस उत्तर की तरह सभी फंक्शंस को एक्सेस करना संभव है, एक कार्यात्मक (स्टेटलेस) घटक में?
डगलस श्मिट 19

1

कब्जा करने के लिए एक तरीका होता है टैब एक में TextInput। यह हैकरी है, लेकिन कुछ भी नहीं से बेहतर है ।

एक onChangeTextहैंडलर को परिभाषित करें जो पुराने के साथ नए इनपुट मूल्य की तुलना करता है, ए के लिए जाँच कर रहा है \t। यदि कोई पाया जाता है, तो @boredgames द्वारा दिखाए गए अनुसार फ़ील्ड को आगे बढ़ाएं

चर मानकर 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} />
    )
  }
}

यह मेरे लिए एक भौतिक कीबोर्ड का उपयोग करके काम नहीं किया। onChangeText ईवेंट टैब पर आग नहीं लगाता है।
बुफके

0

यहां इनपुट घटक के लिए एक अभिकर्मक समाधान है: a: फोकस गुण।

यह क्षेत्र तब तक केंद्रित रहेगा जब तक कि यह प्रस्ताव सत्य पर सेट नहीं हो जाता है और जब तक यह गलत नहीं है तब तक फोकस नहीं होगा।

दुर्भाग्य से इस घटक को एक: रेफरी परिभाषित करने की आवश्यकता है, मुझे इस पर .focus () को कॉल करने का दूसरा तरीका नहीं मिला। मैं सुझावों के बारे में खुश हूं।

(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


@ बाप - यह क्लोजरस्क्रिप्ट है। अभिकर्मक अभिक्रिया के लिए एक बंधन है। यदि आप जिज्ञासु हैं, तो प्रतिक्रिया के लिए यह एक शानदार मेल है यदि आप एक लिस्प के लिए हैं क्योंकि स्टेटफुल अपडेट आमतौर पर केवल swap!एक atomप्रकार की स्पष्ट कॉल जैसी चीजों के साथ ही संभव हैं । डॉक्स के अनुसार, यह प्रतिक्रिया के लिए बाध्य करने के लिए उपयोग किया जाता है: "कोई भी घटक जो परमाणु का उपयोग करता है वह स्वचालित रूप से फिर से प्रस्तुत किया जाता है जब इसका मूल्य बदलता है।" अभिकर्मक-project.github.io
डेल

0

यदि आप UI घटक के रूप में नेटिवबेस का उपयोग कर रहे हैं, तो आप इस नमूने का उपयोग कर सकते हैं

<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>
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.