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!

Mohun

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

Answer 1

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"

Servility

Answer 2

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

Glottalized

Answer 3

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> 

Chesterton

Answer 4

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.

Inspan

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

Answer 5

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

Subarctic