MaterialUI TextField首次清空内容时onChange不触发问题排查

我使用Material UI的TextField组件，代码如下：

<TextField
      defaultValue={formObject.stockname}
      onChange={(e) => handleChange({ key: "stockname", value: e.target.value })
/>

问题：页面刷新后defaultValue已加载，使用CTRL+A全选后按Delete清空输入框，点击失焦后文本恢复，formObject未变化，说明onChange未触发；但第二次操作时功能正常。请问问题原因是什么？

这是因为你用了defaultValue而非受控模式绑定value导致的。

具体原因： #

• 首次加载时，TextField通过defaultValue初始化显示内容，但组件属于非受控组件，内部会维护自己的状态。
• 全选删除后，组件内部状态被清空，但此时formObject.stockname还是初始值。失焦时，组件会重新读取defaultValue的内容，把显示值恢复成初始的formObject.stockname，这个过程不会触发onChange——因为组件认为这是重置到初始值，不是用户主动输入的变更。
• 第二次操作时，组件内部状态已经和defaultValue解绑，后续的输入、清空操作会正常触发onChange更新formObject，所以不会再出现恢复旧值的情况。

解决方法： #

改用受控组件模式，直接绑定value属性替代defaultValue：

<TextField
      value={formObject.stockname}
      onChange={(e) => handleChange({ key: "stockname", value: e.target.value })}
/>

这样输入框的显示值完全由formObject.stockname控制，清空后onChange会触发更新formObject，失焦时也不会再恢复旧值。

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