React Native-将flat List元素内部的文本输入(内部自定义组件)聚焦

Question

我是一个反应本机的初学者，我正在使用平面列表和自定义行。在每个自定义行的内部，我都有文本，文本输入和按钮等元素。问题在于，我需要按下这些按钮之一，该按钮可以启用并触发文本输入的焦点。

我尝试用 refs 实现它，但是一切都冻结了，所以我不知道该如何正确执行。

1. 我的构造函数

class EditProfileScreen extends React.Component {
  constructor(props) {
    super(props);
    this._rowRefs = {}
  }

2. 我的flatlist和mycustomrow

_renderItem = ({item, index}) => {
    return (
      <MyCustomRow 
                       fieldname={item.fieldname}
                       value={item.value}
                       isEditable={item.isEditable}
                       editFieldHandler={ this.editFieldHandler }
                       allowsEdition={item.allowsEdition}
                       ref={ref => { this._rowRefs[index] = ref}}
                      />
    )
  }
  _keyExtractor = (item, index) => index.toString();
  render() {
    return (
      <View style={styles.mainContainer}>
        <FlatList
          ref={this.flatListRef}
          style={styles.flatList}
          data={this.state.fields}
          renderItem={this._renderItem}
          keyExtractor= {this._keyExtractor}
          extraData={this.state.refresh}
        />
      </View>
    );
  }

3. 试图打印参考文献：

enableField(name) {
    console.log('Printing refs...')
    console.log(this._rowRefs) // the Button pressed freezes here
  }

我希望看到_rowrefs内部的内容，但是，该按钮只是被冷冻了，我从未在控制台

Answer 1

尝试给出每个参考的密钥(不是索引(

ref={ref => { this._rowRefs['key1'] = ref}}

并以这样的方式调用焦点动作：

this._rowRefs['key1'].focus()

Answer 2

删除

后可以尝试上述代码

console.log(this._rowRefs)