React <input> 组件的value属性作用是什么？受控组件为何要绑定它？

你现在删除value={controlledValue}后功能看似正常，只是因为当前的handleChange逻辑是完全照搬用户输入的内容更新状态，和原生input的默认输入行为刚好完全一致，状态值和input实际展示值碰巧同步，才看不出差异。绑定value的核心意义是让React状态成为输入框值的唯一可信数据源，实际开发中缺少这个绑定会在大量场景下出问题：

• 自定义输入格式化的场景：比如要求输入内容自动转大写、手机号自动加空格分隔、敏感内容自动过滤。如果没有绑定value，就算你在handleChange里把controlledValue处理成符合要求的格式，输入框里展示的还是用户原始输入的内容，不会自动变成你处理后的结果。
• 内容重置/预设的场景：比如表单加「一键清空」按钮、进入编辑页时自动填充旧数据。没有绑定value的话，你修改controlledValue的状态根本不会同步到输入框的展示内容，重置、预设功能都无法实现。
• 多组件联动的场景：比如选择下拉框的选项后自动填充输入框内容、一个输入框的内容修改同步更新另一个输入框的内容。缺少value绑定的情况下，状态更新无法驱动输入框内容变化，联动逻辑完全失效。

另外你删除value属性后，这个input已经从受控组件变成了非受控组件，你能拿到提交值只是因为你通过onChange监听把输入内容存到了状态里，本质上输入框的展示内容已经和你的状态脱钩，只是当前简单场景下两边值碰巧一致而已。

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