我正在尝试在提交时自动关注下一个文本输入答案

【问题标题】：I am trying to auto focus to the next text input on submit我正在尝试在提交时自动关注下一个文本输入
【发布时间】：2019-10-16 13:18:47
【问题描述】：

我通过映射组件并传递玩家编号来呈现玩家名称的文本输入。我希望用户按回车键，屏幕专注于下一个输入。

我试过了

<TextInput style={styles.nameBox} placeholder="Enter Name" onChangeText={(text) => this.setState({text})} ref={`input-${this.props.number}`}
  onSubmitEditing={value => {
   this.setState({ value })
   if (value) this.refs.input_2.focus();
}} />

问题是我无法对 input_2 进行硬编码，因为我的所有输入都将采用这种方式。我希望它专注于“input-this.props.number++”，基本上是以下输入。

【问题讨论】：

标签： javascript html react-native

【解决方案1】：

您可以开发一个在返回时触发的函数，并将您想要获得焦点的输入类型的 id 作为参数传递。

以下示例代码由medium.com 的 Aung Myint Thein 编写：

//sample text fields

<TextField
  label={"Field 1"}
  blurOnSubmit={ false }
  returnKeyType={ 'next' }
  onSubmitEditing={() => { this.focusTheField('field2'); }}
/>
<TextField
  ref={input => { this.inputs['field2'] = input }}
  label={"Field 2"}
/>

//function

// variable to hold the references of the textfields
inputs = {};
 // function to focus the field
focusTheField = (id) => {
   this.inputs[id].focus();
}

希望对你有帮助

【讨论】：