javascript - 功能组件中的 ContentEditable - 列表项

Question

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

      <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');
  };

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

Answer 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>
))}