React Native - 函数调用后修改TextInput

我试图创建一个表单，它在敲击后会自动移动到以下参数。我想出了一个这样做的方法，但会带走几百行代码。我认为必须有一个更简单的方法。我基本上有两个问题：React Native - 函数调用后修改TextInput

如何添加计数器到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(); 
       }}

来源

2017-06-09 Juanvulcano

String refs正在被弃用，应该避免。不要担心，从长远来看，推荐的方式会为您节省一些头痛，安静简单易懂。

所以基本上我修复了实际上在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' })}

来源

2017-06-09 16:11:32

React Native - 函数调用后修改TextInput

回答

相关问题