Реакция предотвращает отправку формы при вводе ввода внутри входа

Реакция предотвращает отправку формы при нажатии кнопки

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

<SearchBar onInputChange={this.handleInputChange} />

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

Однако, я нахожу, что если я нажимаю кнопку ввода внутри своей строки поиска, вся страница обновляется. И я не хочу этого.

Я знаю, что если у меня есть кнопка в форме, я могу вызвать 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

Ответ 1

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

Простейшая реализация:

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

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

<form onSubmit={this.submitHandler}>

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

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

Ответ 2

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

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

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

Ответ 3

В компоненте React с полем ввода Search, вложенным в более крупную (не React ИЛИ React) форму, это лучше всего работало для меня во всех браузерах:

<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) неверно: вам не нужен event.target. Это поле ввода. Вы хотите само событие. А в React (в частности, в настоящий момент 16.8) вам нужен event.key(e.key, как хотите, чтобы он назывался).