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

Question

当用户单击取消按钮时，我试图将状态反转为真或假。

完整项目可通过以下链接在沙盒上获得。我是新来的反应发展和与状态斗争。有人可以帮忙吗？

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

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

感谢里奥

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 属性：

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;