我知道在初始状态下使用 props 是 React 中的反模式。如何在不使用 state 中的 prop 的情况下达到相同的结果？

Question

待办事项应用程序在我的待办事项应用程序中，我有一个待办事项列表数据，用户可以编辑待办事项标题并保存或取消。保存会改变状态中的数据，如果取消，标题将保持不变。这就是为什么我决定在我的任务组件中设置另一个状态： const [editedTitle, setEditedTitle] = useState(title);用于在输入 onChange 期间保存值，并初始化 prop 中的值。我知道在初始状态下使用 props 是 React 中的反模式。如何在不使用 state 中的 prop 的情况下达到相同的结果？

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>

function Task({ id, title, done, onSaveTodo, onDeleteTodo, onDoneTodo }) {
  const [isEditing, setIsEditing] = useState(false);
  const [editedTitle, setEditedTitle] = useState(title);

  let todoContent;
  if (isEditing) {
    todoContent = (
      <>
        <input
          value={editedTitle}
          defaultValue={title}
          onChange={(e) => setEditedTitle(e.target.value)}
        />
        <button
          onClick={() => {
            setIsEditing(false);
            setEditedTitle(title);
          }}
        >
          Cancel
        </button>
        <button
          onClick={() => {
            setIsEditing(false);
            onSaveTodo(id, editedTitle);
          }}
        >
          Save
        </button>
      </>
    );
  } else {
    todoContent = (
      <>
        <label>{title}</label>{" "}
        <button onClick={() => setIsEditing((prevState) => !prevState)}>
          Edit
        </button>
      </>
    );
  }

  return (
    <li>
      <input
        type="checkbox"
        checked={done}
        onChange={(e) => onDoneTodo(id, e.target.checked)}
      />{" "}
      {todoContent}
      <button onClick={() => onDeleteTodo(id)}>Delete</button>
    </li>
  );
}
 

Answer 1

与

defaultValue

和

value

同时使用

onChange

是不合适的。这些是相互排斥的。

defaultValue

用于非受控输入，而

value

和

onChange

用于受控输入。

摆脱

defaultValue

并执行以下操作：

我相信您需要做的改变很简单。

应该只是改变这个：

        <input
          value={editedTitle}
          defaultValue={title}
          onChange={(e) => setEditedTitle(e.target.value)}
        />

对此：

        <input
          value={isEditing ? editedTitle : title}
          onChange={(e) => setEditedTitle(e.target.value)}
        />