如何在本机反应中关注下一个字段输入？

Posted 2023-03-13

【中文标题】如何在本机反应中关注下一个字段输入？

【英文标题】：How focus the next field input in react native?

【发布时间】：2017-09-15 15:24:21

【问题描述】：

我需要在 android 平台上关注 react native 中的下一个字段输入。 但是focus()函数，在android react native中是没有的，只有ios才有。

这是怎么做的？我使用 react native 和 typescript。

【问题讨论】：

你尝试了什么，请贴出你的代码sn-ps

React Native: How to select the next TextInput after pressing the "next" keyboard button?的可能重复

【参考方案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>

希望这会有所帮助。这是安卓版的。

【参考方案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()。

【讨论】：

如何在基于打字稿的项目中使用此代码？！

【参考方案3】：

这对我有用：

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

【参考方案4】：

我将函数插入到自定义组件中。

public focus()
 this.input.focus()

【讨论】：

完全没有必要创建新方法。

【参考方案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
         
    
/>

【参考方案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

【讨论】：

希望它能解决问题，但请添加对代码的解释，以便用户完全理解他/她真正想要的。

在我看来这里一切都清楚了，第一个onSubmitEditing 调用第二个输入的焦点函数，第二个onSubmitEditing 做了一些事情。这适用于功能组件。