Question

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

在React中实现一个简单的表单时，就像显示的那个here一样（在controlled components标题下，也在下面复制）：

由于setState是异步的，因此该示例不能保证正常工作，对吧？（由于handleSubmit打印this.state.value，但无法保证在调用handleSubmit时已经设置了它。

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

以下是从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

如果您想确保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> ); } }内的输入具有当前值，请使用传递的SyntheticEvent unsqueeze()。

ABC

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

1 个答案: