javascript - 为什么 React 在 onChange 上更新状态而不在 onSubmit (输入)上更新状态？

Question

请参阅下面的代码:

App.jsx

addTodo = event => {
    this.setState({
      newTodo: event.target.value,
      todos: [...this.state.todos, this.state.newTodo]
    });

    console.log(this.state.todos);
  };

AddTodo.jsx

        <form onSubmit={this.props.preventDefault} className="ui form">
          <div className="field">
            <label>Add a todo here:</label>
            <input
              onChange={this.props.addTodo} // addTodo works for onChange why not onSubmit?
              type="text"
              placeholder="Walk the dog..."></input>
            <button type="submit">Submit</button>
          </div>
        </form>

该函数按预期更新了 onChange 的状态，但 onSubmit 没有更新状态，这是为什么？我怀疑它与它所在的标签有关(输入而不是表单)。

Answer 1

preventDefault 阻止表单执行默认操作，即提交表单。 Check out the MDN documentation对于preventDefault。

您需要编写一个自定义函数来处理您希望表单执行的操作，并将 onSubmit 设置为等于该函数。在该自定义函数中，您可以使用 event.preventDefault 来阻止表单最初执行其默认操作。然后，稍后在该函数中，您可以编写所需的任何代码来执行您想要执行的操作。

这是来自 React docs 的示例:

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('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>
    );
  }
}

此外，请查看 React docs for uncontrolled components并理解我上面展示的示例(受控组件方法)和非受控组件方法之间的区别。