React Contenteditable - как я могу назначить onClick для <span>в реагировать-contenteditable?

Question

Есть ли в любом случае, я могу использовать что-то вроде этого:

<span onClick={(e) => console.log(e)}>Testing</span>

Внутри реагировать-contenteditable для обработки нажатия на ключевое слово Testing?

Когда я используйте опору html, она бы взяла только строку html, что-то вроде <span onclick="something()"></span> Полагаю, но есть ли способ сделать это вместо react?

И если я использую <span onclick="something()"> где я должен определить эту функцию something()? Я полагаю, что в этот момент у меня не будет доступа к функциям, определенным в реагировать, верно? Так как мне это сделать?

Answer 1

onClick - это свойство React, поэтому react-contenteditable не знает, что с ним делать - поскольку html ожидает простой html

Хакерский способ достичь того, что вы хотите - или довольно близко к этому - это:

1. Создайте функцию onClickContentEditable и это как onClick для ContentEditable
2. Добавьте innerRef к ContentEditable
3. в onClickContentEditable, то элемент, по которому щелкнули, ContentEditable ничего не делает - поскольку мы хотим взаимодействовать только с дочерними элементами ContentEditable
4. На основе атрибутов DOM элемента, по которому щелкнули (tagName , className ... et c) весело с ним! :) В onClickContentEditable вы можете проверить атрибуты DOM выбранного элемента и принять соответствующие меры. Вы можете создать класс, чтобы отметить элемент, который вы хотите щелкнуть.

Вы можете протестировать эту реализацию здесь - песочница разветвлена ​​из сложного примера react-contenteditable. Я зарегистрировал взаимодействия в консоли.

Надеюсь, это поможет!