Проблема мобильного браузера с изменением размера текстовой области

Question

Я работаю в React.js и у меня есть textarea элементы, которые динамически расширяются и сжимаются в зависимости от размера ввода пользователя.Предполагаемая функциональность следующая:

. Это правильно работает в контексте рабочего стола.Однако на любом мобильном телефоне или планшете в современном браузере (проверенные Safari, Chrome и Firefox) элемент textarea только расширяется, он не сжимается при удалении контента.

Сначала я подумал, что в нем может быть что-тооднако для обработки обработчика onChange, которую я использовал, остается та же проблема при замене обработчика onInput.Поэтому я считаю, что проблема заключается в методе resize().

Кто-нибудь знает, почему я испытываю эту проблему?

Я создал скрипту без стилей, которой можно поделиться сВы основной функционал.Интересно, что ошибка не возникает в симуляторе JSFiddle на мобильном устройстве, но если вы возьмете тот же код и поместите его в другую среду реагирования, то в современных браузерах ошибка возникнет на мобильном устройстве.

https://jsfiddle.net/o4aLfd21/6/

Спасибо заранее

Answer 1

Проблема в том, что вы изменяете DOM напрямую (или пытаетесь) вместо изменения состояния и позволяете React работать правильно.Вы изменяете свойства элементов DOM в resize(), тогда любое входное изменение немедленно вызовет handleChange(e) и перенаправляет ваш DOM, перезаписывая изменения.

НИКОГДА НЕ СМЕШАЙТЕ РЕАГИРОВАТЬ С DOM TOUCHING !!!

Измените вашу resize функцию так, чтобы она работала как ваша handleChange(e) функция, и установите переменные в состоянии, которые управляют этими свойствами в течение render() разметки.