次のフィールド入力はどのように反応しますか？

Question

私は、ネイティブのリアクションで、次のフィールド入力に集中する必要があります。 しかし、focus（）関数は、アンドロイドには存在しません。

どうすればいいですか？私はtypescriptとネイティブの反応を使用します。

<Input 
    ref={(node) => { this.myInput = node }} 
    value={this.state.myInput.toString()} 
    onSubmitEditing={() => { this.myOtherInput.focus() }}/> 
<Input 
    ref={(node) => { this.myOtherInput = node }} 
    value={this.state.myOtherInput.toString()}/> 

あなたが最初の入力に編集を提出するときに二番目に焦点を当てることがわかります。あなたはあなたがに集中したい入力にユーザーrefに持って

Answer 1

私のカスタマイズコンポーネントに関数を挿入します。

public focus(){ 
this.input.focus() 
} 

Answer 2

。必要に応じてthis.MY_CUSTOM_REF.focus（）を使用できます。

Answer 3

フォーカス機能はうまく機能します。

<View style={{flexDirection: 'row'}}> 
     <Text style={{flex: 1}}>Enter Name: </Text> 
     <TextInput ref="name" onChangeText={(name) => this.setState({name})} style={{flex: 1}} 
      onSubmitEditing={() => this.refs.age.focus()}/> 
     </View> 
     <View style={{flexDirection: 'row'}}> 
     <Text style={{flex: 1}}>Enter Age: </Text> 
     <TextInput ref="age" keyboardType="numeric" onChangeText={(age) => this.setState({age})} style={{flex: 1}} 
      onSubmitEditing={() => this.refs.sport.focus()}/> 
     </View> 
     <View style={{flexDirection: 'row'}}> 
     <Text style={{flex: 1}}>Enter Favourite Sport: </Text> 
     <TextInput ref="sport" onChangeText={(sport) => this.setState({sport})} style={{flex: 1}}/> 
     </View> 

これが役立ちます。これはアンドロイド向けです。

Answer 4

これはあなたが何をしようとしなかった便利なreact-native inputs

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

<TextInput 
    ref='1' 
    style={styles.otpInputStyle} 
    keyboardType='numeric' 
    secureTextEntry 
    value={this.props.otp1} 
    maxLength={1} 
    onChangeText={(num) => { 
     this.props.otpCode1(num); //action call 
     if (num && num.length === 1) { 
      this.focusNextField('2'); //function call. '2' ref to next input ref 
     } 
    }} 
/>