功能组件中的 ContentEditable - 列表项答案

【问题标题】：ContentEditable in Functional Component - list item功能组件中的 ContentEditable - 列表项
【发布时间】：2020-04-27 01:13:07
【问题描述】：

有没有机会用这个渲染只编辑一个项目？

      <ul>
        {displayTasks.map(task => (
          <li key={iiud()}>
            <p contentEditable={edit}>{task}</p>
            <button onClick={handleEdit}>{buttonText}</button>{' '}
            <button onClick={handleDelete}>Delete</button>
          </li>
        ))}
      </ul>

我现在的编辑代码是这样的

 const [edit, changeEdit] = useState(false);
  const [buttonText, changeButtonText] = useState('Edit');

 const handleEdit = e => {
    e.preventDefault();
    console.log(e.target);
    let editItem = e.target.previousSibling;
    console.log(editItem);
    changeEdit(!edit);
    buttonText === 'Edit' ? changeButtonText('Save') : changeButtonText('Edit');
  };

当然，点击按钮后，每个项目都是可编辑的。

【问题讨论】：

您可以将 ID 保留在 edit 中，而不是布尔值。如果 edit 没有 ID，则不会编辑任何内容。使用 if 语句有条件地允许编辑。
我尝试过，但仍然不知道如何仅在一项中将 contentEditable 更改为 true
我不会在反应中使用可编辑的内容。他们没有很好的地方
是的，我尝试在单击按钮后将文本更改为输入，但仍然存在相同的问题 - 单击一个按钮，将所有文本更改为输入
iiud() 必须为每个任务输出相同的 ID

标签： javascript reactjs react-functional-component

【解决方案1】：

您需要使用当前正在编辑的任务 ID 进行状态。

const [editTaskId, changeEditTaskId] = useState();

const handleEdit = e => taskId => {
    e.preventDefault();
    changeEditTaskId(taskId);
    buttonText === 'Edit' ? changeButtonText('Save') : changeButtonText('Edit');
};

{displayTasks.map(task => (
     <li key={task.id}>
       <p contentEditable={task.id === editTaskId}>{task}</p>
       <button onClick={handleEdit(task.id)}>{buttonText}</button>{' '}
       <button onClick={handleDelete}>Delete</button>
     </li>
))}

【讨论】：

@OlaKozioł 你给任务添加了 id 吗？
不，我不知道在哪里。我正在尝试不同的东西，但没有任何效果
它是一个数组 - 当用户在表单中广告任务时，这个任务被添加到这个数组中
@OlaKozioł 你需要从 displayTasks 中为项目添加 id。
让我们continue this discussion in chat.