У меня есть поле ввода со значком «закрыть (x)» рядом с ним.Я обрабатываю состояние, когда значение в поле ввода изменяется, и как только пользователь нажимает Enter , я очищаю значение в состоянии.Однако после повторного рендеринга (из-за изменения состояния) предыдущий ввод все еще остается там в поле ввода.
constructor(props) {
super(props);
this.state = {
filterSearchQuery: null, filterSearch: null}
this.handleSearchInput = this.handleSearchInput.bind(this);
this.handleSearchReset = this.handleSearchReset.bind(this);
}
handleSearchInput(e) {
// e.preventDefault();
let val = e.target.value;
if (e.keyCode == 13)
this.setState({ entries: [], filterSearchQuery: null, filterSearch: val, pageIndex: 0, hasMore: false }, this.loadEntries);
else
this.setState({ filterSearchQuery: val });
}
handleSearchReset(e) {
//e.preventDefault();
this.setState({ entries: [], pageIndex: 0, hasMore: false, filterSearchQuery: null, filterSearch: null }, this.loadEntries);
}
рендеринг и возврат:
<input type="text" className="outline-none flex-fill pt-0_2em pb-0_2em border-white border-none bg-color-white color-black font-12px font-weight-bold opacity-0_9" value={this.state.filterSearchQuery} placeholder="Search in results." onKeyUp={(e) => this.handleSearchInput(e)} onChange={(e) => this.handleSearchInput(e)} autoFocus={true} />
{
(this.state.filterSearchQuery && this.state.filterSearchQuery.length > 0) &&
<div className="">
<button type="button" className="close" aria-label="Close" onClick={this.handleSearchReset}>
<span aria-hidden="true">×</span>
</button>
</div>
}
Функция handleSearchReset
работает и устанавливает ожидаемое состояние.Оба значения filterSearch
и filterSearchQuery
установлены правильно.Однако после повторного рендеринга значение filterSearchQuery
все еще отображается в поле ввода.Как я могу преодолеть это или где я скучаю?
Заранее спасибо.