代码之家 › 专栏 › 技术社区 › Liren Yeo

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

react-native-flatlist listitem react-native javascript

Liren Yeo · 技术社区 · 7 年前

我正在中显示这组数据 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 布尔值。

我这样呈现平面列表:

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

还有我的 _renderItem 使用 ListItem 从…起 react-native-elements . 如果 挑选出来的 为true时,将显示一个勾号图标:

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

所以问题是,我如何写我的 _onPressItem 函数使其切换 挑选出来的 已按下项目的数量?

中的演示代码 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 key将返回一些我不知道如何使用的唯一ID:

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

1 回复 | 直到 7 年前

Tim 7 年前

您可以将索引传递给 _onPressItem 功能如下:

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

那么你必须改变你的 _OnPress项目 收件人:

_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 }); 
};