textarea的移动浏览器问题调整大小

Question

我在React.js工作,并具有textarea根据用户输入的大小动态扩展和收缩的元素.预期的功能如下:

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

起初我以为它可能与onChange我使用的处理程序有关,但是,当使用onInput处理程序交换它时仍然存在同样的问题.所以我认为这个问题存在于resize()方法中.

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

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

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

Thx提前

Answer 1

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

切勿将反应与 DOM 触摸混合！！！

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