Question

我需要在android平台中关注native native中的下一个字段输入。但是focus（）函数，在android中不存在本机反应，仅在IOS中。

怎么做到这个？我使用反应原生与打字稿。

Answer 1

焦点功能正常。

<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 2

您必须在您想要关注的输入上使用用户参考：

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

您可以看到，当您在第一个输入上提交编辑时，您将专注于第二个输入。你可以在任何地方使用this.MY_CUSTOM_REF.focus（）。

Answer 3

为我工作：

<Input
  blurOnSubmit={false}
  returnKeyType="next"
  onSubmitEditing={() => {
    this.passwordInput.wrappedInstance.focus();
  }}
/>
<Input
  secureTextEntry
  ref={(input) => {
    this.passwordInput = input;
  }}
/>

Answer 4

我在自定义组件中插入了该函数。

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

Answer 5

看看这篇文章，这可能很方便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
         }
    }}
/>

Answer 6

import React, { useRef } from 'react';

...

export default function YourFuctionalComponent() {
    const input1 = useRef(null);
    const imput2 = useRef(null);
    const doSomething = () => {}

    return(
        <>
             <TextInput
                autoFocus
                ref={input1}
                onSubmitEditing={() => { imput2.current.focus(); }}
                returnKeyType="next"
             />
             <TextInput
                ref={input2}
                onSubmitEditing={() => doSomething()}
                returnKeyType="done"
             />
        </>
    );
}

https://i.stack.imgur.com/W6dvs.gif

如何将下一个字段输入重点放在本机上？

6 个答案: