javascript - React Native - 突出显示平面列表中的项目

Question

我得到了这个功能来突出显示平面列表中的一个项目。它确实突出显示它，当按下但再次按下时不会取消选择该值并且它不会将其保存到状态。我正在使用 React 钩子来管理状态。数据是一个对象数组。我只想添加取消选择此函数中的值的功能。

const [selected, setSelect] = useState(Data);
  
const presshandler = (id) => {
  setSelect((prev) => {
    return prev.map((item) => {
      if (item.id !== id) return item;
      return {
        ...item,
        selectedClass: item.id ? styles.selected : null,
      };
    });
  });
};]]

  <List
    source={selected}
    keyExtractor={(item) => item.id}
    extraData={setSelect}
    renderItem={({ item }) => (
      <TouchableOpacity
        onPress={() => presshandler(item.id)}
      >
        <View>
          <ListDetails
            item={item}
          />
        </View>
      </TouchableOpacity>

标签： javascriptreactjsreact-native

Answer 1

只需更改条件即可解决此问题item.selectedClass ? null : styles.selected

const presshandler = (id) => {
  setSelect((prev) => {
    return prev.map((item) => {
      if (item.id !== id) return item;
      return {
        ...item,
        selectedClass: item.selectedClass ? null : styles.selected,
      };
    });
  });
};]]