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>

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

React Native-平面清单中的重点项目

1 个答案: