CODEWITHSUNDEEP
htmlreactjs
NewProgrammer
NewProgrammer

Reputation: 164

Submit on enter with React

I am trying to have my form submit when the user uses enter. Right now it just refreshes and brings me to the endpoint /?. I had everything working before when I just had it working off click. 

 class NavBar extends Component {
     constructor(props) {
        super(props);
        this.state = {
          term: ''
        }
    this.search = this.search.bind(this);
    this.onChange = this.onChange.bind(this);
}

onChange(e) {
  this.setState({
      term: e.target.value
  });
}

search() {
    event.preventDefault();
    event.stopPropagation();
    this.props.searchrequest(this.state.term);
}

render() {
    return (
                <form onSubmit={this.search}>
                    <input type="text" placeholder="Search" value={this.state.term} onChange={this.onChange}/>
                    <button type="submit" >Search</button>
                </form>
      )}

Upvotes: 0

Views: 54

Answers (3)

ShCh
ShCh

Reputation: 42

Try putting the event object as the first argument in this.search

search(event) { event.preventDefault()}

Upvotes: 1

devserkan
devserkan

Reputation: 17608

You are missing the event argument in your search function. Use it like this:

search( event ) {
    event.preventDefault();
    event.stopPropagation();
    this.props.searchrequest(this.state.term);
}

Upvotes: 3

Kev
Kev

Reputation: 5452

Use event.preventDefault() in your submit event handler. (It's missing "event" in its argument)

Upvotes: 0

Related Questions