У меня довольно глупая проблема. Я нахожусь в процессе создания моего первого приложения React, и у меня возникла небольшая проблема, из-за которой я не могу очистить свое значение ввода после отправки формы. Я попытался найти эту проблему, нашел несколько похожих тем, но я не смог ее решить. Я НЕ хочу менять состояние моего компонента/приложения, просто чтобы изменить значение ввода на пустую строку. Я попытался очистить значение ввода в моей функции onHandleSubmit()
, но получил ошибку:
"Невозможно установить свойство 'значение' из неопределенного".
Мой компонент панели поиска:
import React, { Component } from "react";
class SearchBar extends Component {
constructor(props) {
super(props);
this.state = {
city: ""
};
this.onHandleChange = this.onHandleChange.bind(this);
this.onHandleSubmit = this.onHandleSubmit.bind(this);
}
render() {
return (
<form>
<input
id="mainInput"
onChange={this.onHandleChange}
placeholder="Get current weather..."
value={this.state.city}
type="text"
/>
<button onClick={this.onHandleSubmit} type="submit">
Search!
</button>
</form>
);
}
onHandleChange(e) {
this.setState({
city: e.target.value
});
}
onHandleSubmit(e) {
e.preventDefault();
const city = this.state.city;
this.props.onSearchTermChange(city);
this.mainInput.value = "";
}
}
export default SearchBar;