我正在使用语义UI React“输入”组件对数据进行简单过滤。数据首先加载,然后我根据用户输入应用搜索过滤器来缩小数据范围。
它可以工作,但是键入时非常慢。我看到另一个用户也遇到类似的问题,有人提到onBlur,但这似乎对我不起作用。这是我的Search组件,它将搜索状态传递回我的其他组件之一,以更新数据。有人在这里有什么建议吗?
import React from "react";
import { connect } from "react-redux";
import { Input } from "semantic-ui-react";
import { searchChange, clearSearch } from "../reducers/searchReducer";
const Search = props => {
const handleSearch = event => {
props.searchChange(event.target.value.toLowerCase());
};
const style = {
marginBottom: 10
};
return (
<div style={style}>
<Input
icon="search"
placeholder="Enter filter..."
onChange={handleSearch}
/>
</div>
);
};
const mapStateToProps = state => {
return {
search: state.search,
filter: state.filter
};
};
export default connect(mapStateToProps, {
searchChange,
// filterChange,
clearSearch
})(Search);