Whenever I press Enter when focused on the Input text box, the implicit submit from the Input element triggers a submission and reloads the page:

import React, { Component } from "react";
import { Col, Button, Form, FormGroup, Label, Input } from "reactstrap";
import "./SearchBar.css";

class SearchBar extends Component {
constructor(props) {
    super(props);
    this.state = {
      term: ""
    };

    this.handleTermChange = this.handleTermChange.bind(this);
    this.handleSearch = this.handleSearch.bind(this);
    this.handleEnter = this.handleEnter.bind(this);
}

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

handleSearch() {
    this.props.searchEngine(this.state.term);
}

handleEnter(e) {
    if (e.key === 13) {
      this.handleSearch();
    }
}

render() {
    return (
    <Form className="searchbox">
        <FormGroup row>
        <Label for="searchId" sm={2}>
            Search Engine
        </Label>
        <Col sm={10}>
            <Input
            type="text"
            placeholder="Enter Sth"
            onChange={this.handleTermChange}
            onKeyDown={this.handleEnter}
            />
        </Col>
        </FormGroup>

        <FormGroup>
        <Col sm="2">
            <div className="">
            <Button
                onClick={this.handleSearch}
                className="btn"
            >
                Submit
            </Button>
            </div>
        </Col>
        </FormGroup>
    </Form>
    );
}
}

export default SearchBar;

I just want to trigger the search function with the handler as above, but avoid the implicit submit, i.e. same function when clicking on the Submit button. Otherwise it's just reloading the page and wash out the returned result.

What did I do wrong? I didn't experience this issue with basically the same pattern before.

Dependencies:

• "reactstrap": "^6.5.0"
• "bootstrap": "^4.1.3"
• "react": "^16.6.3"
• "react-dom": "^16.6.3"
• "react-scripts": "2.1.1"

Whenever I press Enter when focused on the Input text box, the implicit submit from the Input element triggers a submission and reloads the page:

import React, { Component } from "react";
import { Col, Button, Form, FormGroup, Label, Input } from "reactstrap";
import "./SearchBar.css";

class SearchBar extends Component {
constructor(props) {
    super(props);
    this.state = {
      term: ""
    };

    this.handleTermChange = this.handleTermChange.bind(this);
    this.handleSearch = this.handleSearch.bind(this);
    this.handleEnter = this.handleEnter.bind(this);
}

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

handleSearch() {
    this.props.searchEngine(this.state.term);
}

handleEnter(e) {
    if (e.key === 13) {
      this.handleSearch();
    }
}

render() {
    return (
    <Form className="searchbox">
        <FormGroup row>
        <Label for="searchId" sm={2}>
            Search Engine
        </Label>
        <Col sm={10}>
            <Input
            type="text"
            placeholder="Enter Sth"
            onChange={this.handleTermChange}
            onKeyDown={this.handleEnter}
            />
        </Col>
        </FormGroup>

        <FormGroup>
        <Col sm="2">
            <div className="">
            <Button
                onClick={this.handleSearch}
                className="btn"
            >
                Submit
            </Button>
            </div>
        </Col>
        </FormGroup>
    </Form>
    );
}
}

export default SearchBar;

I just want to trigger the search function with the handler as above, but avoid the implicit submit, i.e. same function when clicking on the Submit button. Otherwise it's just reloading the page and wash out the returned result.

What did I do wrong? I didn't experience this issue with basically the same pattern before.

Dependencies:

• "reactstrap": "^6.5.0"
• "bootstrap": "^4.1.3"
• "react": "^16.6.3"
• "react-dom": "^16.6.3"
• "react-scripts": "2.1.1"

• javascript
• reactjs
• bootstrap-4
• reactstrap

Share Improve this question Follow asked Dec 12, 2018 at 15:56 suvtfopwsuvtfopw 1,0381111 silver badges1818 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

I found out that it is the <Form> element that triggers the implicit submission. I change it to <Form className="searchbox" onSubmit={this.handleSubmit}> and add a new function:

handleSubmit(e) { 
    e.preventDefault(); 
    this.handleSearch();
}

Full working code modified from question:

import React, { Component } from "react";
import { Col, Button, Form, FormGroup, Label, Input } from "reactstrap";
import "./SearchBar.css";

class SearchBar extends Component {
constructor(props) {
    super(props);
        this.state = {
            term: ""
        };

    this.handleTermChange = this.handleTermChange.bind(this);
    this.handleSearch = this.handleSearch.bind(this);
    this.handleEnter = this.handleEnter.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    }

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

    handleSearch() {
        this.props.searchEngine(this.state.term);
    }

    handleEnter(e) {
        if (e.key === 13) {
        this.handleSearch();
        }
    }

    handleSubmit(e) {
        e.preventDefault();
        this.handleSearch();
   }

render() {
    return (
    <Form className="searchbox" onSubmit={this.handleSubmit}>
        <FormGroup row>
        <Label for="searchId" sm={2}>
            Search Engine
        </Label>
        <Col sm={10}>
            <Input
            type="text"
            placeholder="Enter Sth"
            onChange={this.handleTermChange}
            onKeyDown={this.handleEnter}
            />
        </Col>
        </FormGroup>

        <FormGroup>
        <Col sm="2">
            <div className="">
            <Button
                onClick={this.handleSearch}
                className="btn"
            >
                Submit
            </Button>
            </div>
        </Col>
        </FormGroup>
    </Form>
    );
}
}

export default SearchBar;

You need to prevent default event when Enter key pressed.

handleEnter(e) {
    if (e.key === 13) {
     e.preventDefault();
     this.handleSearch();
    }
}

e.preventDefault() tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be.