reactjs - React TypeScript onSubmit e.preventDefault() nu funcționează

Construiesc o aplicație simplă de căutare a utilizatorilor folosind React și TypeScript. Am un formular de bază cu un câmp de text pentru a căuta utilizatori și un buton de input care trimite căutarea. Dar metoda e.preventDefault() din metoda mea onSubmit nu pare să funcționeze. Când trimit formularul, întreaga aplicație se reîmprospătează. De fapt, este posibil ca onSubmit să nu fie apelat deloc.

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

Aveți sugestii? Mulțumesc!

Răspuns #1

Adaugi onSubmit în locul greșit.

Ar trebui să adaugi în formular, nu în buton.

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

Dacă te uiți la exemplul din documentație, vei vedea că îl adaugă în form.

*Rețineți că pentru a declanșa onSubmit al form-ului, input/button trebuie să aibă type="submit"

Răspuns #2

Poți face pur și simplu asta :-

 private handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    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"   onSubmit={(e) =>this.handleSubmit(e)}>
          <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" 
          
          />
        </form>
      </div>
    );
  }