FlatList 单个 select 单元格

Question

我按照官方文档中的示例，这里是如何实现 multiselection 功能：

state = { selected: (new Map(): Map<string, boolean>) };

onPressItem = (id) => {
  this.setState((state) => {
    const selected = new Map(state.selected);
    selected.set(id, !selected.get(id)); 
    return { selected };
  });
};

虽然我正在努力让它成为单身 select。每当点击单元格时，很容易 return 带有错误值的新地图，但这意味着单元格不能被select再次点击它，这是我想要的功能。

onPressItem = (id) => {
  this.setState((state) => {
    const selected = new Map();
    selected.set(id, !selected.get(id)); 
    return { selected };
  });
};

你会如何实施？我应该使用 lodash 遍历 Map 以找到已经为真的那个并更改它的值（尽管现在确定如何遍历 Map），或者也许我现在缺少一些更好的方法？

编辑

遍历 selected 地图的元素似乎是一个非常丑陋的想法，但它很简单而且确实有效。有没有我错过的更好的方法？

onPressItem = (id: string) => {
  this.setState((state) => {
    const selected = new Map(state.selected);
    selected.set(id, !selected.get(id));
    for (const key of selected.keys()) {
      if (key !== id) {
        selected.set(key, false);  
      } 
    }
    return { selected };
  });
 };

提前致谢

Answer 1

你可以只设置一个值而不是像这样的地图

onPressItem = (id) => {
  this.setState((state) => {
    const selected = selected === id ? null : id; 
    return { selected };
  });
};

Answer 2

我遇到了同样的问题，我的解决方案是：

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

            // save selected value
            let isSelected = selected.get(id);

            // reset all to false
            selected.forEach((value, key) => {
                selected.set(key, false);
            });

            // then only activate the selected
            selected.set(id, !isSelected);

            return { selected };
        });
    };

FlatList 单个 select 单元格

FlatList single select cell

react-native

react-native-flatlist