reactjs - 如何在下次按下时聚焦下一个输入(如果有)

Question

我实际上知道如何做到这一点，但我需要不同的方法。
所以我有如下文本输入:

<TextInput returnKeyType='next' 
           ref={ref => this.someName = ref}
           onSubmitEditing={(event) => { this.nextFieldName.focus() }}/>

技巧是我不想为下一个字段使用特定名称，而是简单地关注下一个字段(如果有的话)。
这可能吗？

Answer 1

你的问题有点宽泛。如果您提供更多详细信息，我可能会有所帮助，但现在让我给您举个例子。

假设您有一组数据，您正在映射这些数据并创建一个表单。

const data = [
  {
    type: 'text',
    value: 'name'
  },
  {
    type: 'text',
    value: 'surname'
  },
  {
    type: 'number',
    value: 'age'
  }
];

现在让我们迭代数据

data.map((field, index) => {
  return (
    <TextInput
      type={field.type}
      value={this.state[field.value]}
      ref={(ref) => this.refs[index] = ref}
      onSubmitEditing={() => this.onSubmitEditing(index)}
    />
  );
});

现在，因为我们知道我们在哪个字段，以及另一个字段是否存在，所以我们可以聚焦或提交表单。

onSubmitEditing = (index) => {
  if (data.length <= (index + 1)) {
    this.refs[index + 1].focus();
  } else {
    // no input to move 
    // submit form
  }
}