ReactNative TextInput聚焦

Question

我在我的应用程序中有一个表单，通过单击" next“返回按钮，我希望用户能够进入下一个TextInput。我的输入组件：

    export default class Input extends Component {

  focusNextField = (nextField) => {
    console.log('NEXT FIELD:', nextField);
    this.refs[nextField].focus();
  }

  render() {

    var keyboardType = this.props.keyboardType || 'default';
    var style = [styles.textInput, this.props.style];

    if (this.props.hasError) style.push(styles.error);

    return (
      <View style={styles.textInputContainer}>
        <TextInput
          placeholder={this.props.placeholder}
          onChangeText={this.props.onChangeText}
          style={style}
          blurOnSubmit={false}
          ref={this.props.reference}
          returnKeyType= {this.props.returnType}
          onSubmitEditing={() => this.focusNextField(this.props.fieldRef)}
          secureTextEntry={this.props.isPassword}
          value={this.props.value}
          keyboardType={keyboardType}
          underlineColorAndroid="transparent" />
        {this.props.hasError && this.props.errorMessage ? <Text style={{ color: 'red' }}>{this.props.errorMessage}</Text> : null}
      </View>
    );
  }
}

以及如何使用：

<Input onChangeText={(email) => this.setState({ email })} value={this.state.email} returnType={"next"} reference={'1'} fieldRef={'2'} keyboardType="email-address" />

      <Text style={{ color: '#fff', marginTop: 10, }}>Password</Text>
      <Input onChangeText={(password) => this.setState({ password })} value={this.state.password} returnType={"done"}
       reference={'2'} fieldRef={'2'} isPassword={true} />

但我知道错误是：

undefined is not an object (evaluating _this.refs[nextField].focus)

Answer 1

不确定您是否仍在尝试这样做，但对于其他有此问题的人，请执行以下操作：

1. 将此代码添加到导入中(在导入的任何地方) 将{ findNodeHandle }从‘text本机’导入；从‘text本机/lib/ TextInputState’导入TextInputState；导出函数focusTextInput(节点){ try {findNodeHandle} catch(e) {console.log(“无法聚焦文本输入："，e.message} }；
2. 在构造函数中添加以下行 this.focusNextField = this.focusNextField.bind(this)；this.inputs = {}；
3. 向类中添加以下函数 focusNextField(id) { this.inputsid.focus()；}
4. 编辑您的TextInput如下： {this.focusNextField(‘2’)；}} ref={ input { => { input‘’one‘= input;}} /> {this.focusNextField(’3‘)；} ref={ input => {TextInput’input‘2’=input；} /> .

这是答案的来源

为我工作过0.45。