如何在本机反应中单击下一个字段？答案

【问题标题】：How to focus next feald on next is clicked in react native?如何在本机反应中单击下一个字段？
【发布时间】：2017-06-04 14:44:55
【问题描述】：

您好，我正在尝试关注下一个输入字段（从父级扩展），同时点击下一个（在 android 键盘中）android 键盘关闭并且不关注下一个字段。

我尝试了一些代码，例如 onSubmitEditing= this.refs.passwordFeald.focus() 它不起作用，如果有人解释它也更好，我对命名组件有点困惑

以下是我当前的代码

export default class InputBox extends Component {
    focusNextField = (nextField) => { this.refs[nextField].focus(); };

    render(){
        return(
            <TextInput
                style = {style.input}
                underlineColorAndroid='rgba(255,255,255,0.7)' 
                placeholderTextColor = "rgba(255,255,255,0.6)"
                placeholder = {this.props.placeholder}
                secureTextEntry={this.props.typePassword}
                returnKeyType = {this.props.returnKeyType}
                ref = {this.props.inputRef}
                focusNextField = {() => this.focusNextField(this.props.onSubmitEditing)}
            />
        )
    }
}

export default class Login extends Component {

  render(){
    return(
      <View style={[styles.container, commonStyle.background]}>
        <View style={[headerContStyle.topContainer]}>
          <MainHeading/>
        </View>
        <View style={[formStyle.container]}>
          <InputBox
            placeholder = "Email or username"
            returnKeyType = "next"
            inputRef = {el => this.usenameFeald = el}
            onSubmitEditing= 'passwordFeald'
          />
          <InputBox
            placeholder = "Password"
            secureTextEntery = {"true"}
            returnKeyType = "go"
            inputRef = {el => this.passwordFeald = el}
            typePassword = {true}
          />
          <CommonButton
              title = "Login"
          />
          <CommonButton
              title = "Sign Up"
          />
          <ForgotPassword />
        </View>
      </View>
    )
  }
}

【问题讨论】：

标签： reactjs react-native ecmascript-6

【解决方案1】：

参考关于TextInputhere的文档。

您可以看到该示例关注下一个TextInput 类BlurOnSubmitExample。在您的项目中，我建议您在第一个输入时更改这样的属性：

<InputBox
  placeholder="Email or username"
  returnKeyType="next"
  onSubmitEditing={() => this.nextInput.focus()}
 />

第二个：

<InputBox
  placeholder="Password"
  returnKeyType="next"
  inputRef={(nextInput) => this.nextInput = nextInput}
 />

在InputBox组件上，我们将ref发送给父组件：

ref={(nextInput) => {this.props.inputRef && this.props.inputRef(nextInput)}}
{ ...this.props }

onSubmitEditing 将在用户按下回车键时调用，这将聚焦第二个TextInput。

【讨论】：