在设置所有受控字段的状态之前，我可以避免提交 React 表单吗

Question

（我知道这是一个简单的问题。在发帖之前我已经尝试在前面的问题中找到答案。关于 setState 是异步的，关于你可以使用回调函数等的问题有很多，但我没有找到类似以下的问题）。

在 React 中实现一个简单的表单时，例如 here 所示的表单（在 controlled components 标题下，也复制在下面）：

由于setState 是异步的，因此不能保证该示例有效，对吧？ （由于handleSubmit 打印this.state.value，但不能保证它已经设置，当handleSubmit 被调用时）。

有没有办法确保 handleSubmit 仅在表单中所有受控组件的状态更改完成后才被调用（并且不使用 redux 或类似的东西）？

这是从reactjs.org 复制的代码（我复制它是为了确保即使 URL 更改也可以读取它）：

lass 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('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

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

Answer 1

如果您想确保在 handleSubmit 内有输入的当前值，请使用传递给 access inputs from a form 的 SyntheticEvent。

lass 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) {
    event.preventDefault();

    const form = event.currentTarget;
    const inputValue = form.elements["user_name"].value;
    alert('A name was submitted: ' + inputValue);
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" name="user_name" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}