React TypeScript onSubmit e.preventDefault() not working

user_8008104 0
Viewed 38450

I'm building a simple user search app using React and TypeScript. I have a basic form with an input text box to search users and an input button that submits the search. But the e.preventDefault() method in my onSubmit method doesn't seem to be working. When I submit, the whole app refreshes. Actually, it may be that onSubmit isn't even being called at all.

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

Any suggestions? Thanks!

typescript reactjs form-submit forms
4 Answers

You are adding onSubmitin the wrong place.

You should add in the form not in the button.

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

If you look at the example on the docs you will see that they add it in the form.

*Remember that to trigger the form's onSubmit, your input/button needs to have type="submit"

user_91191860

You can simply do this :-

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

Also in addition to moving the event from onClick to onSubmit, to get the event from the form, type React.FormEvent works.

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

Instead of e:React.FormEvent<HTMLInputElement>
user_138306960

I fixed the similar issue by removing e.preventDefault from handleSubmit function and adding **onClick={e => {e.preventDefault(); this.handleSubmit()}}** on button. and you have to put onSubmit on Form.

  private handleSubmit = (e: React.FormEvent<HTMLInputElement>) => {
    this.props.searchUsers(this.state.text);
    this.setState({text: ''});
  }
  public render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit} 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" 
            onClick={e => {e.preventDefault(); this.handleSubmit()}}
          />
        </form>
      </div>
    );
  }

This is tested and should work.

user_109871260
Related