React开发：能否不处理表单变更直接处理表单提交？

嘿，完全不用不好意思！新手阶段遇到这类疑问太正常啦 😊

你提到的官方文档里的写法，其实是React里的受控组件模式——简单来说，就是表单元素的值完全由React组件的state来管控。每次输入变更时更新state，是为了让React能实时获取到表单的最新值，这样咱们就能轻松实现很多实用功能：

• 输入内容的即时验证（比如输入邮箱时实时提示格式是否正确）
• 输入内容的自动格式化（比如输入手机号时自动插入分隔符）
• 根据输入状态控制提交按钮的禁用/启用（比如所有必填项填完才允许提交）

给你补全那个类组件的完整示例，方便你对照理解：

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('提交的名字: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          名字:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="提交" />
      </form>
    );
  }
}

不过如果你觉得每次变更都更新state太繁琐，也有另一种选择——非受控组件，这种方式更接近原生HTML的表单处理逻辑，直接通过ref获取表单元素的当前值，不用实时维护state，适合简单的表单场景：

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.nameInput = React.createRef();
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    alert('提交的名字: ' + this.nameInput.current.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          名字:
          <input type="text" ref={this.nameInput} />
        </label>
        <input type="submit" value="提交" />
      </form>
    );
  }
}

总结一下：受控组件是React官方推荐的方式，能让你对表单状态有更强的掌控力；非受控组件更轻量化，适合不需要实时交互的简单表单。你可以根据自己的项目需求来选择合适的方式哦！

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