Javascript React Native-在函数调用后修改TextInput

我正在尝试创建一个窗体，在按下enter键后，它将自动移动到以下参数。我想出了一种方法，但实际上需要数百行代码。我想一定有更简单的办法。我基本上有两个问题：

如何向XInput2部件添加计数器

如何正确添加引用。我当前的代码给出：undefined不是对象this5.refs.XInput.focus（）未定义

这是呈现文本输入字段的代码

renderTextField(options) {
    return (
        <TextInput
            style={styles.textfield}
            onChangeText={(value) => this.setState({ [options.name]: value})}
            onSubmitEditing={(event) => { 
            this.refs.XInput.focus(); 
            }}
            placeholder={options.label}
            value={this.state[options.name]}
            keyboardType={options.keyboard || 'default'}
        />
    );
}

请看一看这本书。我认为最好的方法是对XInput值使用某种计数器并手动修改它。如何为该值添加计数器，或者有更好的方法吗

onSubmitEditing={(event) => { 
                this.refs.XInput.focus(); 
                }}

---

字符串引用已被弃用，应避免使用。别担心，从长远来看，推荐的方法会帮你省去一些头痛，而且简单易懂

因此，基本上我将ref固定在TextInput中，而不是担心复杂的计数器系统，我使用

next

选项将其简化，该选项将是提交时下一个字段的名称

这应该让你开始：

renderTextField = (options) => {
  return (
    <TextInput
      ref={(tInput) => { this.refs[options.name] = tInput; }}
      style={{ height: 25 }}
      onChangeText={(value) => this.setState({ [options.name]: value })}
      onSubmitEditing={() => {
        if (options.next) {
          this.refs[options.next].focus();
        }
      }}
      placeholder={options.label}
      value={this.state[options.name]}
      keyboardType={options.keyboard || 'default'}
    />
  );
};

---

字符串引用已被弃用，应避免使用。别担心，从长远来看，推荐的方法会帮你省去一些头痛，而且简单易懂

因此，基本上我将ref固定在TextInput中，而不是担心复杂的计数器系统，我使用

next

选项将其简化，该选项将是提交时下一个字段的名称

这应该让你开始：

renderTextField = (options) => {
  return (
    <TextInput
      ref={(tInput) => { this.refs[options.name] = tInput; }}
      style={{ height: 25 }}
      onChangeText={(value) => this.setState({ [options.name]: value })}
      onSubmitEditing={() => {
        if (options.next) {
          this.refs[options.next].focus();
        }
      }}
      placeholder={options.label}
      value={this.state[options.name]}
      keyboardType={options.keyboard || 'default'}
    />
  );
};

{renderTextField({ name: 'cacao21', label: 'Fermented Beans', next: 'cacao22' })}
{renderTextField({ name: 'cacao22', label: 'Partially Fermented Beans', next: 'cacao23' })}
{renderTextField({ name: 'cacao23', label: 'End of the Bean Line' })}