React Native - FlatList 中的焦点输入答案

【问题标题】：React Native - Focus Input In FlatListReact Native - FlatList 中的焦点输入
【发布时间】：2019-07-04 22:22:13
【问题描述】：

我正在根据来自服务器的数据呈现动态列表。如果 onSubmitEditing 事件被触发，FlatList 中的下一个组件应该被聚焦。我尝试使用 refs 来聚焦动态表单，但它不能正常工作（下一个输入没有得到聚焦）。为了识别 FlatList 中的项目，使用了索引。

<FlatList
  ref={ref => this.flatList = ref}
  data={this.state.articles}
  renderItem={({item,index}) => this.renderItem(item, index)}
  keyExtractor={(item, index) => index}
  extraData={this.state}
/>

renderItem = (itemData, index) => {
  <TextInput
    ref={'article' + index}
    onSubmitEditing={
      () => {
        let reference = 'article' + (index+1);
        this.refs.reference.focus();
      }
  />
}

如何根据 ref 聚焦下一个字段？

【问题讨论】：

标签： javascript react-native

【解决方案1】：

要获得下一个参考，请使用此 this.refs[reference] 集中尝试 .current.focus() 或 .focus() 不确定哪一个可行。

所以你的代码会是这样的`

`this.refs[reference].current.focus()` or `this.refs[reference].focus()`

【讨论】：