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

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