Создать контролируемый contenteditable, который также работает на сенсорных мобильных телефонах

Question

Привет, я пытаюсь создать компонент div, способный реагировать, который работает как поле ввода, но с некоторыми дополнительными функциями, которые я хочу реализовать, но так как функций немного, я хочу реализовать это сам, а не использовать что-то вроде slatejs или draftjs, которые делают так много тяжелой работы.

моя идея состоит в том, что у меня должен быть контролируемый contenteditable div, который я слушаю на событиях, которые вставляют некоторый текст. (как общая идея реагировать контролируемых компонентов)

это выглядело просто. Я должен прослушивать события нажатия клавиш и при каждом событии просто вставлять соответствующий символ (event.key) в свое состояние. однако я обнаружил, что на мобильных устройствах с сенсорными клавиатурами это значение (event.key) всегда равно "Неопознано".

также иногда входные события имеют свойство "data", которое определяет вставленное значение. но в сенсорной клавиатуре это событие не имеет свойства data.

поэтому мой вопрос заключается в том, как мы можем получить вставленные символы таким образом, чтобы глобально работать на настольных и мобильных устройствах? как авторы draftjs и slatejs обнаруживают вставленные символы (даже на сенсорном мобильном телефоне) и обновляют их состояние?

Answer 1

Я, наконец, получил ответ, оказывается, что в реакции есть событие под названием onBeforeInput который может быть использован на contenteditable div и имеет свойство, называемое data это соответствует тексту, который будет вставлен (как на мобильном, так и на рабочем столе). это событие отменяется, поэтому вы можете позвонить preventDefault на нем и обновите свое состояние. к сожалению, это событие не было упомянуто ни в одном из реактивных документов (!!), и я нашел его по проблеме в их репозитории на github.