待办事项列表在单击时将状态反转为 false onclick

Question

我正在尝试在用户单击取消按钮时将状态反转为 true 或 false。

完整的项目可通过下面的 link 在沙盒上获得。我是新手，无法应对发展和与状态作斗争。有人可以帮忙吗？

要了解我上面的意思，请输入一些内容并单击添加

https://codesandbox.io/s/eloquent-feather-gc88n?file=/src/header/header.js

感谢 Leo

Answer 1

将您的 handleCancelClick 功能更新为：

handleCancelClick = (e) => {
    setIsEditing((prevState) => !prevState)
    console.log('Cancel edit', isEditing)
}

您可能还需要一些修正：

在skillist.js中：

<EditSkillsForm
  inputs={inputs}
  isEditing={isEditing}
  setIsEditing={setISEditing}
  onCancelClick={handleCancelClick}
  onUpdateInput={handleUpdateInput}
  onCurrentInput={currentInput}
/>

在 editSkillsForm.js 中，我们得到 isEditing 和 setIsEditing props :

const EditSkillsForm = ({
  handleUpdateInput,
  inputs,
  handleCancelClick,
  setCurrentSkill,
  isEditing,
  setIsEditing
}) => {

完整文件代码（以防万一）： editSkillsForm.js:

import React, { useState } from "react";

const EditSkillsForm = ({
  handleUpdateInput,
  inputs,
  handleCancelClick,
  setCurrentSkill,
  isEditing,
  setIsEditing
}) => {
  //const [ currentSkill, setCurrentSkill ] = useState({});
  // const [isEditing, setIsEditing] = useState(true);
  // const [ onSubmitEditing, SetOnSubmitEditing ] = useState("")

  function handleEditInputChange(e) {
    setCurrentSkill(e.target.value);
  }

  handleCancelClick = (e) => {
    setIsEditing(false);
    console.log("Cancel edit", isEditing);
  };

  return (
    <>
      {isEditing ? (
        <div>
          <h4>Edit Skill</h4>
          <input
            className="mb-2"
            size="lg"
            onChange={handleEditInputChange}
            type="text"
            name="Update skill"
            placeholder="Update skill"
            value={inputs}
          />
          <button className="btn btn-primary mx-2" onClick={handleUpdateInput}>
            Update
          </button>
          <button onClick={() => handleCancelClick()}>Cancel</button>
        </div>
      ) : null}
      {/* <div>
      <h4>Edit Skill</h4>
      <input
      className="mb-2"
      size="lg"
      onChange={handleEditInputChange}
      type="text"
      name="Update skill"
      placeholder="Update skill"
      value={inputs}
       />
    </div> */}
      {/* <input
      className="mb-2"
      size="lg"
      onChange={handleEditInputChange}
      type="text"
      name="Update skill"
      placeholder="Update skill"
      value={inputs}
       /> */}
      {/* <button className="btn btn-primary mx-2">Update</button> */}
      {/* <button onClick={() => handleCancelClick()}>Cancel</button> */}
    </>
  );
};

export default EditSkillsForm;

待办事项列表在单击时将状态反转为 false onclick

Todo list Reverse state to false on click onclick

state

boolean

reactjs

use-state