带有语义UI的搜索输入React OnChange非常慢

时间:2019-11-27 21:08:06

标签: javascript reactjs semantic-ui-react

我正在使用语义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);

0 个答案:

没有答案