javascript - React prevent form submission when enter is pressed inside input - Stack Overflow

admin管理员组

文章数量:1135111

React prevent form submission when enter is pressed

I have the following React Search Bar component where the parent container can call using

<SearchBar onInputChange={this.handleInputChange} />

Everytime the user changes the input, the parent container will be notified. This is why my search bar does not need any submit button.

However, I am finding that if I press enter inside my search bar, the whole page refreshes. And I dont want that.

I know if I have a button in the form, I could call event.preventDefault(). But in this case I have no button so I dont know what to do here

class SearchBar extends Component {
    constructor(props) {
        super(props);
        this.state = { value: '' };
        this.handleChange = this.handleChange.bind(this)
    }

    handleChange(e) {
        this.setState({ value: e.target.value });
        this.props.onInputChange(e.target.value);
    }

    render() {
        return (
        <div id="search-bar">
            <form>
            <FormGroup controlId="formBasicText">
                <FormControl
                type="text"
                onChange={this.handleChange}
                value={this.state.value}
                placeholder="Enter Character Name"
                />          
            </FormGroup>
            </form>
        </div>
        );
    }
}

export default SearchBar

React prevent form submission when enter is pressed

I have the following React Search Bar component where the parent container can call using

<SearchBar onInputChange={this.handleInputChange} />

Everytime the user changes the input, the parent container will be notified. This is why my search bar does not need any submit button.

However, I am finding that if I press enter inside my search bar, the whole page refreshes. And I dont want that.

I know if I have a button in the form, I could call event.preventDefault(). But in this case I have no button so I dont know what to do here

class SearchBar extends Component {
    constructor(props) {
        super(props);
        this.state = { value: '' };
        this.handleChange = this.handleChange.bind(this)
    }

    handleChange(e) {
        this.setState({ value: e.target.value });
        this.props.onInputChange(e.target.value);
    }

    render() {
        return (
        <div id="search-bar">
            <form>
            <FormGroup controlId="formBasicText">
                <FormControl
                type="text"
                onChange={this.handleChange}
                value={this.state.value}
                placeholder="Enter Character Name"
                />          
            </FormGroup>
            </form>
        </div>
        );
    }
}

export default SearchBar

• javascript
• reactjs

Share Improve this question Follow asked May 3, 2017 at 2:58 ErnieKevErnieKev 3,01155 gold badges2222 silver badges3535 bronze badges 3

• 2 Is there a reason you need to use a form tag? If you replace that with a div then enter won't submit. – sissonb Commented May 3, 2017 at 3:03
• Div would word too. I had a form there just incase I want to add more fields in the future and form allows more control – ErnieKev Commented May 3, 2017 at 5:11
• That is bad practice. You use form where it makes sense semantically, not because of the added enter functionality. – Mystical Commented May 10, 2024 at 23:51

Add a comment  | 

7 Answers 7

Sorted by: Reset to default 107

You need to create a form handler that would prevent the default form action.

The simplest implementation would be:

<form onSubmit={e => { e.preventDefault(); }}>

But ideally you create a dedicated handler for that:

<form onSubmit={this.submitHandler}>

with the following implementation

submitHandler(e) {
    e.preventDefault();
}

In a React component with a Search input field, nested in a larger (non-React OR React) form, this worked best for me across browsers:

<MyInputWidget
  label="Find"
  placeholder="Search..."
  onChange={this.search}
  onKeyPress={(e) => { e.key === 'Enter' && e.preventDefault(); }}
  value={this.state.searchText} />

(e)=>{e.target.keyCode === 13} (@DavidKamer's answer) is incorrect: You don't want the event.target. That's the input field. You want the event itself. And in React (specifically 16.8, at the moment), you want event.key (e.key, whatever you want to call it).

I'm not sure if this works for every situation, as when you press enter in a form's input field you will still trigger the onSubmit method, although the default submit won't occur. This means that you will still trigger your pseudo submit action that you've designed for your form. A one liner with ES6 that solves the problem specifically and entirely:

<input onKeyPress={(e)=>{e.target.keyCode === 13 && e.preventDefault();}} />

This solution should have 0 side effects and solves the problem directly.

The best way to prevent the ENTER, as suggested also by Eon is to add the following to your input element:

onKeyPress={(e) => { e.key === 'Enter' && e.preventDefault(); }}

This works for me:

<Input
   ...
   onKeyDown={(e) => { e.key === 'Enter' && e.preventDefault() }}
/>

This works for me:

<form ...>
    {/* Prevent implicit submission of the form */}
    <button
        aria-hidden="true"
        className="hidden"
        disabled
        type="submit"
     ></button>

For those interested in the literature

TL;DR:

4.10.22.2 Implicit submission
A form element's default button is the first submit button in tree order whose form owner is that form element.

If the user agent supports letting the user submit a form implicitly (for example, on some platforms hitting the "enter" key while a text field is focused implicitly submits the form), then doing so for a form whose default button has a defined activation behavior must cause the user agent to run synthetic click activation steps on that default button.

Consequently, if the default button is disabled, the form is not submitted when such an implicit submission mechanism is used. (A button has no activation behavior when disabled.)

prevent for Enter key for search input:

<input type="text" onKeyDown={e => {
  if (e.key === 'Enter') e.preventDefault();
}} />

本文标签： javascriptReact prevent form submission when enter is pressed inside inputStack Overflow