React предотвращает отправку формы при нажатии enter внутри ввода

React предотвратить подачу формы при нажатии enter

у меня есть следующий компонент React Search Bar, где родительский контейнер может вызывать с помощью

<SearchBar onInputChange={this.handleInputChange} />

каждый раз, когда пользователь изменяет вход, родительский контейнер будет уведомлен. Вот почему в моей строке поиска не нужна кнопка отправки.

тем не менее, я обнаружил, что если я нажму enter в строке поиска, вся страница обновится. А я этого не хочу.

Я знаю, если у меня есть кнопку в форме я мог бы назвать event.preventDefault (). Но в этом случае у меня нет кнопки, поэтому я не знаю, что здесь делать

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
9
javascript reactjs

2 ответов

вам нужно создать обработчик формы, который предотвратит действие формы по умолчанию.

самая простая реализация может быть:

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

но в идеале вы создаете специальный обработчик для этого:

<form onSubmit={this.submitHandler}>

со следующей реализацией

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

Я не уверен, что это работает для каждой ситуации, так как при нажатии enter в поле ввода формы вы все равно вызовете метод onSubmit, хотя отправка по умолчанию не произойдет. Это означает, что вы все равно инициируете псевдо-действие отправки, которое вы разработали для своей формы. Один лайнер с ES6, который решает проблему конкретно и полностью:

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

Это решение должно иметь 0 побочных эффектов и решает проблему напрямую.

0