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使用ListItem中的react-native-elements。如果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键会返回一些我不知道如何使用的唯一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来切换目标状态

1 个答案: