Почему 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 препятствует выполнению формой действия по умолчанию, то есть отправки формы. Ознакомьтесь с документацией MDN для 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 для неконтролируемых компонентов и поймите разницу между примером, который я показал выше (подход с управляемыми компонентами), и подходом неконтролируемых компонентов.