React TypeScript onSubmit e.preventDefault() not working

Question

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!

This should help you out: medium.com/@ericclemmons/…

Adam
– Adam

2019-06-12 12:25:11 +00:00
Commented Jun 12, 2019 at 12:25 — Adam
– Adam, Commented Jun 12, 2019 at 12:25

Vencovsky · Accepted Answer · 2019-06-12 12:32:57Z

23

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"

edited Jun 12, 2019 at 12:32

answered Jun 12, 2019 at 12:27

Vencovsky

32.1k25 gold badges132 silver badges202 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Abdullah Ch · Accepted Answer · 2021-06-16 19:45:53Z

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

Olu Teax · Accepted Answer · 2021-06-10 04:47:22Z

8

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>

edited Jun 10, 2021 at 4:47

answered Jun 7, 2021 at 20:13

Olu Teax

1892 silver badges5 bronze badges

Comments

Bishal Ghimire · Accepted Answer · 2020-01-08 16:53:30Z

3

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.

answered Jan 8, 2020 at 16:53

Bishal Ghimire

6878 silver badges15 bronze badges

1 Comment

Calum Over a year ago

The form submit handler should have an event type of: e: React.FormEvent<HTMLFormElement>

Kartik K · Accepted Answer · 2023-04-19 10:00:36Z

0

const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault()
    }

return (
    <form onSubmit={e => handleSubmit(e)}>
            <label>Name</label>
            <input type="text" placeholder='John Doe'/>

            <label>Email</label>
            <input type="email" placeholder='[email protected]'/>

            <input type="submit"/>
    </form>
)

answered Apr 19, 2023 at 10:00

Kartik K

161 bronze badge

Collectives™ on Stack Overflow

React TypeScript onSubmit e.preventDefault() not working

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related