ReactJS已配置value/onChange的输入框无法键入内容问题求助

问题背景 #

项目原有可正常运行的输入框，在新增字段后突然无法接收任何输入；已排除未配置value/onChange、MUI组件本身缺陷的问题，使用MUI TextField、原生input编写测试用例表现完全一致。

测试用输入框代码：

<TextField 
    id="outlined-basic" 
    name="text-container-field"
    label="Texto" 
    variant="outlined" 
    value={this.state.customText} 
    onChange={this.onCustomTextChange.bind(this)}
/>

<input 
    type="text" 
    name="text-container" 
    value={this.state.customText} 
    onChange={this.onCustomTextChange.bind(this)} 
/>

测试用事件处理代码：

onCustomTextChange = event => {
    this.setState({customText: event.target.value})
}

排查方向（按出现概率从高到低排序） #

• 状态被意外重置
  这是大型项目新增代码后最容易触发的问题：
  1. 在onCustomTextChange方法、组件render函数入口分别打日志，打印this.state.customText，确认输入触发时setState是否执行、状态是否更新、更新后是否立刻被其他逻辑改回初始值。
  2. 重点排查本次新增的逻辑：是否在componentDidUpdate/useEffect里写了无依赖/依赖错误的表单重置逻辑，是否有全局状态（Redux/Mobx/Context）的订阅回调错误覆盖了本地组件state，是否有表单校验逻辑在值变化时强制将字段重置为默认值。
• 输入事件被全局拦截
  1. 检查本次新增的全局键盘事件监听（keydown/keypress/input），是否存在无差别调用e.preventDefault()/e.stopPropagation()的逻辑，拦截了输入框的原生输入事件。
  2. 给输入框绑定onKeyDown、onInput事件打日志，确认键盘按下时事件是否正常触发，是否被上层节点捕获拦截。
• 组件无限重渲染/反复卸载挂载
  1. 在输入框所属组件的componentDidMount、componentWillUnmount钩子打日志，确认输入触发重渲染时，组件是否出现反复挂载卸载的情况——如果每次按键都触发组件重建，刚更新的state会被直接重置，表现为无法输入。
  2. 重点排查父组件是否在render阶段动态生成新对象/新函数作为props向下传递，是否存在setState触发后立刻又满足重渲染条件的死循环逻辑。
• 交互被上层元素拦截
  打开浏览器开发者工具，用元素选择器定位输入框所在位置，确认选中的元素是input本身而非上层透明遮罩：本次新增的固定定位元素、弹窗蒙层如果z-index设置错误，会透明覆盖在输入框上方，导致所有输入、点击事件无法落到输入框上。
• 多React实例冲突
  如果项目是微前端架构、或者本次新增依赖引入了多份React副本，会出现setState触发后更新无法同步到当前渲染树的问题。可在组件内打印React版本号，和项目全局挂载的React版本做比对，确认是否存在多实例共存的情况。

快速定位技巧 #

临时将受控输入改为非受控模式，用defaultValue替换value属性，注释掉onChange里的setState逻辑测试输入：

• 如果非受控模式下可以正常输入，问题100%出在状态更新/重置逻辑
• 如果非受控模式下依然无法输入，直接排查事件拦截、遮罩层、多实例问题

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