Javascript 功能组件中的内容可编辑-列表项

是否有可能使用此渲染仅使一个项目可编辑

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

---

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

您需要使用当前正在编辑的任务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>
))}

const[editTaskId，changeEditTaskId]=useState（）；
const handleEdit=e=>taskId=>{
e、 预防默认值（）；
changeEditTaskId（taskId）；
buttonText==“编辑”？changeButtonText（“保存”）：changeButtonText（“编辑”）；
};
{displayTasks.map（任务=>(

{task}
{buttonText}{'}
删除

))}

您可以在

edit

中保留ID而不是布尔值，如果

edit

没有ID，则不会编辑任何内容。使用if语句有条件地允许编辑。我已尝试但仍然不知道如何仅在一个项目中将contentEditable更改为true我不会在react中使用contentEditable。他们不会把文本放在任何地方是的，我尝试在点击按钮后将文本转换为输入，但仍然存在相同的问题-点击一个按钮，将所有文本转换为输入

iuid（）

必须为每个按钮输出相同的IDtask@OlaKozioł您是否已将id添加到任务中？不，我不知道在哪里。我尝试了不同的方法，但没有任何效果。这是一个数组-当用户在表单中添加任务时，此任务被添加到表单中array@OlaKozioł您需要从displayTasks向项目添加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>
))}