在 React 函数中打开和关闭 contentEditable？

Question

我有一个反应函数，可以输出一个 div。这个 div 是可拖动的，它也应该是可编辑的。我曾尝试使用 contentEditable，它在设置为“true”时使 div 可编辑，但是我不能再拖动该项目，只能编辑它。

有没有办法让 div “可编辑性”打开和关闭，例如使用 onclick 将 contentEditable 设置为“on”，使用 doubleClick 将 contentEditable 设置为“true”，从而启用拖动？

return (
    <div
        onDoubleClick contentEditable={true} // needs to be toggleable, in some way

        ref={provided.innerRef}
        {...provided.draggableProps}
        {...provided.dragHandleProps}
        {item.content};
    </div>
)

Answer 1

这就是使用钩子的方式。我假设你正在使用它们。

const [contentEditable, setContentEditable] = React.useState(false)

return (
    <div
        onDoubleClick={()=> setContentEditable(!contentEditable)}

        ref={provided.innerRef}
        {...provided.draggableProps}
        {...provided.dragHandleProps}
        {item.content};
    </div>
)