reactjs - 如何更改对象上按钮的状态？

Question

我尝试更改按钮上的值。基本上，当我单击按钮验证时，任务转到我的列“tâcheà faire”，按钮是“en cours”。

当我单击此按钮时，我希望我的任务（使用我的 const “switchencours”）切换到“terminé”的“encours”并移动到“tâches terminées”列

目前，当我点击按钮时，没有任何动静，我的价值“etat”没有改变。

有人可以帮我吗？

function Task() {
  const [task, setTask] = useState({ task: "", etat: "en cours" });

  const [todoList, setTodoList] = useState([]);

  const switchEnCours = () => {
    setTask({ ...task, etat: "terminé" });
  };

  const switchTerminé = () => {
    setTask({ ...task, etat: "supprimée" });
    setTodoList([...todoList, task]);
  };

  const handleInput = (e) => {
    setTask({ ...task, task: e.target.value });
  };
  const AddTask = () => {
    setTodoList([...todoList, task]);

    console.log(todoList);
  };

  useEffect(() => console.log(todoList), [todoList]);

  return (
    <div>
      <input onChange={handleInput}></input>
      <button onClick={AddTask}>Valider</button>
      <div className="DivColonne">
        <div className="Colonne">
          <h1>Tâche à faire</h1>

          {todoList.map((insertTask, index) => {
            if (insertTask.etat === "en cours") {
              return (
                <div>
                  <p>{insertTask.task}</p>
                  <button onClick={switchEnCours}>{insertTask.etat}</button>
                </div>
              );
            } else {
              return <div></div>;
            }
          })}
        </div>
        <div className="Colonne">
          <h1>Tâche en cours</h1>

          <div>
            {todoList.map((insert) => {
              if (insert.etat === "terminé") {
                return (
                  <div>
                    <p>{insert.task}</p>
                    <button onClick={switchTerminé}>{insert.etat}</button>
                  </div>
                );
              }
            })}
          </div>
        </div>
        <div>
          <h1>Tâches terminées</h1>

          <div>
            {todoList.map((done) => {
              if (done.etat === "supprimé") {
                return (
                  <div>
                    <p>{done.task}</p>
                    <p>{done.etat}</p>
                  </div>
                );
              }
            })}
          </div>
        </div>
      </div>
    </div>
  );
}

export default Task;

标签： reactjsreact-hooks

Answer 1

您的switchEnCours功能是设置task状态，其中不同的列Tâche à faire等Tâche en cours使用todoList状态。为了使更改反映在不同的列中，您需要将新更改设置为todoListstate。请在下面找到正确的实现。我已经对您的switchEnCours和switchTerminé功能进行了更改。

function Task() {
  const [task, setTask] = useState({ task: "", etat: "en cours" });

  const [todoList, setTodoList] = useState([]);

  const switchEnCours = (taskToSwitch) => {
    setTodoList((todoList) =>
      todoList.map((item) =>
        item === taskToSwitch ? { ...item, etat: "terminé" } : item
      )
    );
  };

  const switchTerminé = (taskToSwitch) => {
    setTodoList((todoList) =>
      todoList.map((item) =>
        item === taskToSwitch ? { ...item, etat: "supprimé" } : item
      )
    );
  };

  const handleInput = (e) => {
    setTask({ ...task, task: e.target.value });
  };
  const AddTask = () => {
    setTodoList([...todoList, task]);

    console.log(todoList);
  };

  useEffect(() => console.log(todoList), [todoList]);

  return (
    <div>
      <input onChange={handleInput}></input>
      <button onClick={AddTask}>Valider</button>
      <div className="DivColonne">
        <div className="Colonne">
          <h1>Tâche à faire</h1>

          {todoList.map((insertTask, index) => {
            if (insertTask.etat === "en cours") {
              return (
                <div>
                  <p>{insertTask.task}</p>
                  <button onClick={() => switchEnCours(insertTask)}>
                    {insertTask.etat}
                  </button>
                </div>
              );
            } else {
              return <div></div>;
            }
          })}
        </div>
        <div className="Colonne">
          <h1>Tâche en cours</h1>

          <div>
            {todoList.map((insert) => {
              if (insert.etat === "terminé") {
                return (
                  <div>
                    <p>{insert.task}</p>
                    <button onClick={() => switchTerminé(insert)}>
                      {insert.etat}
                    </button>
                  </div>
                );
              }
            })}
          </div>
        </div>
        <div>
          <h1>Tâches terminées</h1>

          <div>
            {todoList.map((done) => {
              if (done.etat === "supprimé") {
                return (
                  <div>
                    <p>{done.task}</p>
                  </div>
                );
              }
            })}
          </div>
        </div>
      </div>
    </div>
  );
}

export default Task;

您还可以在此代码沙箱中找到正确的实现