Реакция предотвращает отправку формы при нажатии кнопки
У меня есть следующий компонент 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