如何使用 ListItem onPress 切换目标状态

Question

我在FlatList中显示这组数据。

state = {
  data: [
    {key: 'DE', title: 'DE', selected: true},
    {key: 'FR', title: 'FR', selected: true},
    {key: 'GB', title: 'GB', selected: false},
    {key: 'US', title: 'US', selected: false},
    {key: 'GE', title: 'GE', selected: true},
    {key: 'JP', title: 'JP', selected: true},
  ],
}

我希望列表中的每个项目都像复选框一样 - 按下每个项目将切换它的 selected 布尔值。

我正在像这样渲染 FlatList：

  <List containerStyle={{marginTop: 0}}>
    <FlatList
      data={this.state.data}
      keyExtractor={this._keyExtractor}
      renderItem={this._renderItem}
    />
  </List>

我的 _renderItem 使用 react-native-elements 的 ListItem。如果 selected 为真，则显示勾号图标：

_renderItem = ({item, index}) => (
  <ListItem
    title={item.title}
    avatar={getFlag(item.key)}
    onPress={this._onPressItem}
    rightIcon={{name: 'done'}}
    hideChevron={!item.selected}
  />
)

所以问题是，我如何编写我的 _onPressItem 函数来让它切换按下的项目的 selected？

FlatList official docs中的演示代码对我来说没有意义：

_onPressItem = (id: string) => {
  // updater functions are preferred for transactional updates
  this.setState((state) => {
    // copy the map rather than modifying state.
    const selected = new Map(state.selected);
    selected.set(id, !selected.get(id)); // toggle
    return {selected};
  });
};

当我运行那个时，onPress 事件会给我一个事件对象，访问它的 target 键会 return 给我一些我不知道如何使用的唯一 ID使用：

_onPressItem = e => {
  console.log(e.target) // => a unique ID number
                       // How can I find the pressed data item?
};

Answer 1

您可以像这样将索引传递给您的 _onPressItem 函数：

_renderItem = ({item, index}) => (
  <ListItem
    title={item.title}
    avatar={getFlag(item.key)}
    onPress={() => _onPressItem(item, index)}
    rightIcon={{name: 'done'}}
    hideChevron={!item.selected}
  />
)

然后您必须将 _onPressItem 更改为：

_onPressItem = (item, index) => {
    // loop over your state data and create newStateArray 
    newState = this.state.data.map((val,i) => {
        if (index === i) {
            // change selected value of pressed entry
            return { ...val, selected: !val.selected }; 
        }
        //otherwise just return current value
        return val;
    }
    this.setState({ data: newState }); 
};

如何使用 ListItem onPress 切换目标状态

How to use ListItem onPress to toggle target state

javascript

react-native

listitem

react-native-flatlist