在React中直接修改event.target.value会产生哪些后果？

直接在React输入事件处理函数里修改event.target.value会带来一系列问题，具体如下：

• 输入框显示异常，交互体验糟糕
  比如用户输入"123abc"，parseInt提取出123并设置回输入框后，用户输入的abc会直接消失；如果输入纯非数字内容（比如"abc"），parseInt返回NaN，输入框会显示"NaN"，完全不符合预期。另外像输入小数"12.3"，parseInt会截断成12，小数点直接被丢弃，用户体验极差。

• React状态与真实DOM不一致
  React受控组件依赖「状态→DOM」的单向数据流，直接修改DOM元素的value会绕过React的状态管理机制，导致React虚拟DOM记录的输入值和真实DOM的实际值不匹配。后续组件重新渲染时，可能出现状态覆盖DOM值，或者DOM值和状态脱节的诡异bug。

• 合成事件池化导致的异步访问问题
  React的合成事件是被池化复用的，事件处理函数执行完毕后，事件对象的所有属性会被清空并回收。如果父组件的onChange里有异步操作（比如setState的回调、异步请求），当异步代码去访问event.target.value时，拿到的可能是undefined或者其他被复用后的错误值。

• 破坏受控组件的设计约定
  React受控组件的标准模式是通过value属性绑定状态、onChange回调更新状态来同步输入值。直接修改DOM值违背了这个约定，会让组件行为变得不可预测，后续维护或者其他开发者使用这个组件时，很容易因为不了解这个非常规操作而踩坑。

内容的提问来源于stack exchange，提问作者JD Francis