首页 > 解决方案 > 在一组复选框中选择特定的复选框

问题描述

我有来自的数据getTasks()并将其存储在tasks 我为每个任务创建了一个组件,其中包含每个任务的数据和一个复选框。我想单击一个复选框并仅显示我单击的那个,而不是全部显示。我正在使用 React Native。我怎样才能做到这一点?谢谢。

export default () => {
  const [tasks, setTasks] = React.useState([]);
  const [checked, setChecked] = React.useState(false);

  React.useEffect(() => {
    (async () => {
      const response = await getTasks();
      setTasks(response);
    })();
  }, []);

  return tasks.map(({id, title, description, date}) => (
    <View key={id} style={styles.task}>
      <CheckBox
        value={checked}
        onValueChange={() => {
          setChecked((prevState) => !prevState);
        }}
      />
      <View style={styles.taskTextContainer}>
        <Text>{title}</Text>
        <Text>{description}</Text>
        <Text>{date}</Text>
      </View>
    </View>
  ));
};

标签: javascriptreactjsreact-native

解决方案


您将相同的内容传递value={checked}给所有复选框。您可以创建一个布尔数组来完成此操作。


推荐阅读