时间戳

首页 > 解决方案 > React Native - 聚焦在 Flat List 元素内部的 TextInput（内部自定义组件）

react-native - React Native - 聚焦在 Flat List 元素内部的 TextInput（内部自定义组件）

问题描述

我是 React Native 初学者，我正在使用平面列表和自定义行。在每个自定义行中，我都有 Text、TextInput 和 Button 等元素。问题是我需要按下这些按钮之一来启用和触发对 TextInput 的关注。

我尝试用refs实现它，但一切都冻结了，所以我不知道如何正确地做到这一点。

  1. 我的构造函数
class EditProfileScreen extends React.Component {
  constructor(props) {
    super(props);
    this._rowRefs = {}
  }
  1. 我的 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>
    );
  }
  1. 尝试打印参考：
enableField(name) {
    console.log('Printing refs...')
    console.log(this._rowRefs) // the Button pressed freezes here
  }

我希望看到 _rowRefs 内部的内容，但不是那样，按钮只是被冻结，我从未在控制台中看到该结果

标签： react-native

解决方案

尝试为每个参考（而不是索引）提供密钥

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

并像这样调用焦点操作：

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

推荐阅读