javascript - React Native - 函数调用后修改 TextInput

Question

我正在尝试制作一个表单，在按 Enter 键后将自动移动到以下参数。我找到了一种方法，但实际上需要数百行代码。我想一定有一个更简单的方法。我基本上有两个问题:

1. 如何向 XInput2 部分添加计数器。
2. 如何正确添加引用。我当前的代码给出:未定义不是对象 this5.refs.XInput.focus() 未定义。

这是用于渲染我的 TextInput 字段的代码。

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'}
        />
    );
}

这将是我用来调用它的代码。

{this.renderTextField({ name: 'cacao21', label: 'Fermented Beans', ref="XInput1"})}
{this.renderTextField({ name: 'cacao22', label: 'Partially Fermented Beans', ref="XInput2"})}

请看一下 XInput。我认为最好的方法是使用 XInput 值的计数器并手动修改它。如何为该值添加计数器或者是否有更好的方法？

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

Answer 1

字符串引用已被弃用，应该避免。别担心，从长远来看，推荐的方法会为您省去一些麻烦，而且非常简单易懂。

所以本质上我修复了在 TextInput 中实际定义的 ref，而不是担心复杂的计数器系统，而是使用 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' })}