代码之家 › 专栏 › 技术社区 › theDC

平面列表单选单元格

react-native-flatlist react-native

theDC · 技术社区 · 6 年前

我遵循了官方文档中的示例,下面是如何实现多重选择功能:

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

但我正努力让它成为单选的。只要点击单元格,就可以很容易地返回带有假值的新映射,但这意味着不能通过再次点击单元格来取消选择该单元格,这是我的示例中所需的功能。

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

您将如何实施它?我应该使用lodash在地图上迭代以找到已经为真的地图并更改其值(现在确定如何在地图上迭代),还是我现在缺少更好的方法?

编辑

迭代 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 };
  });
 };

提前感谢

2 回复 | 直到 6 年前

David Walschots 6 年前

您只能设置一个值,而不是像这样的贴图

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

josecastillo86 5 年前

我也有同样的问题,我的解决方案是:

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

推荐文章

theDC · 平面列表单选单元格

6 年前

Md Nahid Hasan · 如何在react原生平面列表中精确定位项目并隐藏某些内容?

6 年前

j_d · 如何使用React Native FlatList设置重新排序动画?

6 年前

johanjohansson · 如何在平面列表中交替颜色(React Native)

6 年前

arnoldbird · 我的平面列表似乎不需要密钥抽取器——为什么?

6 年前

KaplanAlex · React Native FlatList-使用动态大小呈现列表项

6 年前

Sandro_V · 对FlatList的React本机引用不起作用

6 年前

Saeid · 在react native中不调用平面列表中的函数

6 年前

Corrado · ReactNative平面列表-RenderItem不工作

6 年前

Adnan Ali · ReactNative android应用程序中的慢速动画

6 年前