Question

我尝试制作一个表单，在点击后会自动移动到以下参数。我想出了一种方法，但我会花费数百行代码。我认为必须有一个更简单的方法。我基本上有两个问题：

如何将计数器添加到XInput2部件。
如何正确添加引用。我当前的代码是：undefined不是一个对象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

字符串引用已被弃用，应避免使用。不用担心，从长远来看，推荐的方法可以让您省去一些头痛，而且很容易理解。

基本上我修改了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' })}

React Native - 在函数调用

1 个答案: