React添加onChange后仍出现表单字段value未配onChange警告的排查

问题根源 #

警告的触发对象不是你配置了onChange的range输入框，而是显示密码的text输入框。你给该输入框设置了value={pass}，但既未添加onChange处理函数，也未标记它为readOnly。React会将这种情况判定为「受控组件却未提供变更处理逻辑」，因此抛出警告。

解决办法 #

根据输入框的使用场景，选择以下两种方案之一：

场景1：仅展示生成的密码，不允许用户编辑 #

给text输入框添加readOnly属性，明确告知React这是一个只读的受控展示组件：

<input type="text" value={pass} readOnly />

场景2：允许用户手动修改生成的密码 #

为text输入框添加onChange处理函数，同步更新pass状态：

<input 
  type="text" 
  value={pass} 
  onChange={(e) => setPass(e.target.value)} 
/>

补充说明 #

排查此类警告时需注意：提示中的「form field」不一定是你最先怀疑的控件，要检查所有设置了value属性的表单元素，确保每个受控组件都有对应的变更逻辑，或明确标记为只读。

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