Question

您好我正在尝试关注下一个输入字段（从父级扩展），而下一次（在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>
    )
  }
}

Answer 1

参考有关TextInput here的文档。

您可以看到该示例将下一个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。

如何将下一个feald集中在下一个点击in react native？

1 个答案: