调整文本区域大小的移动浏览器问题

Question

我正在React.js中工作，并且具有textarea元素，这些元素根据用户输入的大小动态扩展和收缩。预期的功能如下：

这在桌面环境中可以正常工作。但是，在现代浏览器（经过Safari，Chrome和Firefox测试）上的任何移动设备或平板电脑上，textarea元素只会扩展，删除内容时不会收缩。

起初，我认为它可能与我使用的onChange处理程序有关，但是，将其与onInput处理程序交换出来时，仍然存在相同的问题。因此，我认为问题出在resize()方法中。

有人知道我为什么遇到这个问题吗？

我创建了一个无样式的小提琴，与您分享基本功能。有趣的是，该错误不会在移动设备上的JSFiddle模拟器中发生，但是如果您使用相同的代码并将其放在另一个React环境中，则该错误会在现代浏览器中的移动设备上发生。

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

提前谢谢

Answer 1

问题是您正在直接修改DOM（或尝试修改），而不是修改状态并允许React正常流动。您在resize()中修改DOM元素属性，然后任何输入更改将立即调用handleChange(e)并重新流化DOM覆盖修改。

从不与DOM触摸混合！！！

更改resize函数的行为使其类似于handleChange(e)函数，并在状态下设置变量，以在标记的render()期间控制这些属性。