React受控表单中input的value属性是否为可选配置？

Great question—this is a common point of confusion when first wrapping your head around controlled forms in React. Let's break this down step by step:

1. 绝对不能省略value属性（如果要实现受控组件的话） #

当你写 <input name='name' onChange={e => this.handleChange(e)} /> 却不写value属性时，这个输入框就不再是受控组件了，它会变成非受控组件。

非受控组件让浏览器DOM自己管理输入框的值。哪怕你的onChange函数在把输入值同步到state，但输入框本身并不受state控制，这会造成数据和UI的脱节：

• 如果你之后手动更新state.name（比如点击重置按钮执行this.setState({name: ''})），输入框不会跟着清空，因为它根本没在监听state的变化。
• 你也没法通过state来实现验证规则、动态值更新（比如用户输入时自动格式化手机号）这类功能，因为输入框的值根本不由React掌控。

2. “value仅为确保数据同步到state才需要”的说法并不准确 #

value属性的作用远不止同步数据——它的核心是让React成为表单状态的唯一数据源。

受控组件的完整闭环是这样的：

• 用户在输入框打字 → 触发onChange事件
• handleChange函数把输入值更新到state.name
• React重新渲染输入框，把更新后的state.name传给value属性
• 输入框显示state里的最新值

这个闭环保证了输入框的UI永远和state保持一致。去掉value就等于打破了这个闭环——React无法控制输入框显示的内容，state和DOM很容易出现不一致的情况。

举个直观的反例 #

假设你有这段不带value的代码：

class Form extends React.Component {
  state = { name: '' };

  handleChange = (e) => {
    this.setState({ name: e.target.value });
  };

  resetForm = () => {
    this.setState({ name: '' });
  };

  render() {
    return (
      <div>
        <input name='name' onChange={this.handleChange} />
        <button onClick={this.resetForm}>重置</button>
      </div>
    );
  }
}

点击“重置”按钮后，state.name会变成空字符串，但输入框里还是会显示用户之前输入的内容——因为它是非受控的。加上value={this.state.name}之后，重置功能就会正常工作，因为输入框的值完全由state决定了。

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