включить и выключить contentEditable внутри функции React?

Question

У меня есть функция реагирования, которая выдает div. Этот div является перетаскиваемым, и он также должен быть редактируемым. Я попытался использовать contentEditable, который делает div редактируемым, когда установлено значение 'true', но тогда я больше не могу перетаскивать элемент, только редактировать его.

Есть ли способ заставить 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>
)