javascript - 在React函数中打开和关闭contentEditable切换？

我有一个反应功能，把一个div。该div是可拖动的，并且也应该是可编辑的。我尝试使用contentEditable，当将div设置为'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>
)

最佳答案

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

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

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

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

关于javascript - 在React函数中打开和关闭contentEditable切换？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/60472305/