reactjs - 如何在单击时惯用地将文本组件转换为输入组件？

Question

我正在 React 创建一个待办事项应用程序，它基本上只是一个按类别分组的项目列表。我想添加功能，以便当我单击单个待办事项(这是一个段落)时，它会显示一个带有我可以编辑和保存的当前文本的输入。如何在不手动编辑 DOM 的情况下做到这一点？

代码: 单个待办事项:

import React from 'react';

const Item = props => {
  return (
    <div
      className={`item${props.item.purchased ? ' purchased' : ''}`}
      onClick={() => props.toggleItem(props.item.id)}
    >
      <p>{props.item.name}</p>
    </div>
  );
};

export default Item;

我想将切换更改为单选按钮并单击以编辑待办事项。 sample image of todos

Answer 1

首先，您需要一个用于更新 item.name 的 prop(当您编辑输入时需要这个)

您没有很好地解释您希望它如何工作，所以我做了一个示例，您单击文本将其编辑为文本输入，并且还有一个按钮来保存编辑.

const Item = props => {
  const [isEditing, setIsEditing] = useState(false);

  return isEditing ? (
    <div>
      <input
        value={props.item.name}
        onChange={e => props.setItemName(e.target.value)}
      />
      <button onClick={() => setIsEditing(false)}>Stop Editing</button>
    </div>
  ) : (
    <div
      className={`item${props.item.purchased ? " purchased" : ""}`}
      onClick={() => setIsEditing(true)}
    >
      <p>{props.item.name}</p>
    </div>
  );
};

我还创建了一个工作 codesanbox与您想要的行为。