Реагируйте на TypeScript onSubmit e.preventDefault () не работает - PullRequest
Новая
       34

Реагируйте на TypeScript onSubmit e.preventDefault () не работает

1 голос
/ 12 июня 2019

Я создаю простое приложение для поиска пользователей, используя React и TypeScript.У меня есть базовая форма с текстовым полем ввода для поиска пользователей и кнопкой ввода, которая выполняет поиск.Но метод e.preventDefault() в моем методе onSubmit, похоже, не работает.Когда я отправляю, все приложение обновляется.На самом деле, возможно, что onSubmit вообще не вызывается. 

  private handleSubmit = (e: React.FormEvent<HTMLInputElement>) => {
    e.preventDefault();
    this.props.searchUsers(this.state.text);
    this.setState({text: ''});
  }

  private handleChange = (e: React.FormEvent<HTMLInputElement>) => {
    this.setState({text: e.currentTarget.value});
  }

  public render() {
    return (
      <div>
        <form className="form">
          <input 
            type="text" 
            name="text" 
            value={this.state.text} 
            placeholder="Search Users..."
            onChange={this.handleChange}
          />
          <input 
            type="submit"
            value="search"
            className="btn btn-dark btn-block" 
            onSubmit={this.handleSubmit}
          />
        </form>
      </div>
    );
  }

Есть предложения?Спасибо!

1 Ответ

2 голосов
/ 12 июня 2019

Вы добавляете onSubmit в неправильном месте.

Вы должны добавить form, а не кнопку. 

  public render() {
    return (
      <div>                    // \/ added here
        <form className="form" onSubmit={this.handleSubmit}>
          <input 
            type="text" 
            name="text" 
            value={this.state.text} 
            placeholder="Search Users..."
            onChange={this.handleChange}
          />
          <input                 // removed from the button
            type="submit"
            value="search"
            className="btn btn-dark btn-block" 
          />
        </form>
      </div>
    );
  }

Если вы посмотрите на пример на документах , вы увидите, что они добавили его в form.

* Помните, что для запуска form onSubmit ваш input / button должен иметь type="submit"

...