时间戳

首页 > 解决方案 > 如何从切换复选框中设置状态？

react-native - 如何从切换复选框中设置状态？

问题描述

当我尝试使用复选框中的 onToggle 将状态设置为 true 时，setState 不起作用。

我试图控制台记录该功能，它可以工作，只是状态不会改变。

import CircleCheckBox, { LABEL_POSITION } from 'react-native-circle-checkbox';

const MyTaskItem = (props) => {

    return (

        <CircleCheckBox
            checked={props.taskDone}
            onToggle={props.onToggleCheck}
        />

    );
};

import MyTaskItem from "../../components/MyTaskItem";

export default function MyTasksScreen() {

  const [taskDone, setTaskDone] = useState(false);

  const checkDoneHandler = () => {
    setTaskDone(true);
    console.log(setTaskDone);
  };

  return (
    <View style={styles.screen}>
      <MyTaskInput visible={isAddMode} onAddTask={addTaskHandler} onCancel={cancelTaskAdditionHandler} />
      <FlatList
        keyExtractor={(item, index) => item.id}
        data={myTasks}
        renderItem={itemData =>
          <MyTaskItem
            id={itemData.item.id}
            onDelete={removeTaskHandler}
            title={itemData.item.title}
            description={itemData.item.description}
            onToggleCheck={checkDoneHandler}
          />}
      />
      <AddTodoButton onPress={() => setIsAddMode(true)} />
    </View>
  );
}

切换复选框时，我想将 taskDone 上的状态更改为 true/false。

标签： react-native

解决方案

我猜你想改变特定的任务状态，所以首先，你需要传递切换的任务的ID，所以MyTaskItem可以这样重写：

const MyTaskItem = (props) => {
    const {taskDone, id, onToggleCheck} = props;
    return (
        <CircleCheckBox
            checked={taskDone}
            onToggle={()=>onToggleCheck(id)}
        />
    );
};

然后你应该在你的MyTasksScreen. 由于FlatList是 a PureComponent，因此您需要将更改的状态传递给extraDataflatlist 的属性，以通知项目状态已更改。如果您想更改所有项目的done状态，您可以这样做：


export default function MyTasksScreen() {

  const [taskDone, setTaskDone] = useState(false);

  const checkDoneHandler = () => {
    setTaskDone(true);
    console.log(setTaskDone);
  };

  return (
    <View style={styles.screen}>
      <MyTaskInput visible={isAddMode} onAddTask={addTaskHandler} onCancel={cancelTaskAdditionHandler} />
      <FlatList
        keyExtractor={(item, index) => item.id}
        data={myTasks}
        extraData={taskDone}
        renderItem={itemData =>
          <MyTaskItem
            id={itemData.item.id}
            onDelete={removeTaskHandler}
            taskDone={taskDone}
            title={itemData.item.title}
            description={itemData.item.description}
            onToggleCheck={checkDoneHandler}
          />}
      />
      <AddTodoButton onPress={() => setIsAddMode(true)} />
    </View>
  );
}

推荐阅读