#facebook #reactjs #input #chat #messenger
#Facebook #reactjs #ввод #Чат #messenger
Вопрос:
Я пытаюсь воссоздать с помощью React ввод данных в чат facebook / messenger. До сих пор я понимал, что ввод в чат представляет собой пользовательский ввод для ввода сообщений, построенных с помощью a <div /> , где для атрибута contentEditable установлено значение true. Этот пользовательский ввод увеличивается с минимальной высоты до максимальной высоты. После достижения максимальной высоты пользовательский ввод устанавливает полосу прокрутки для прокрутки его содержимого.
Я пытаюсь выяснить, как это обрабатывается с помощью реквизитов пользовательского ввода и состояния его материнского компонента, но я не совсем понимаю, как это сделать правильно.
Есть ли способ, учебник или что-то еще для этого? Или для обеспечения хорошего поведения ввода в чат?
Комментарии:
1. Вы можете использовать CSS для ограничения минимальной и максимальной высоты. Вы также можете использовать свойство overflow в CSS, чтобы настроить его для прокрутки более длинных сообщений. У вас должно быть состояние, в котором текст сохраняется внутри поля ввода. Я правильно понял ваш вопрос?
2. Да, к сожалению, это сложный компонент, потому что это компонент CMS (может обрабатывать входные данные html). Вы должны посмотреть на фактический компонент,
draft.js, который является проектом CMS с открытым исходным кодом. Довольно классная штука.3. Может быть, вам стоит взглянуть на фактический форматированный текстовый редактор Facebook, Draft.js — facebook.github.io/draft-js
4. aashah7, Да, вы правильно поняли 🙂 ZekeDroid, Джефф Макклауд, большое вам спасибо, я постараюсь Draft.js 🙂