我将react-table用于数据网格。我正在尝试实现一个搜索过滤器,该过滤器可搜索整个表中的数据并使用过滤器方法进行过滤。我为搜索维护了一个单独的组件,并在搜索组件中设置了表的数据。从搜索过滤器中删除字符时,过滤将中断。我在这里做错什么了吗?
沙箱:https://codesandbox.io/s/stoic-gould-kw9iq
import React from "react";
import { Input } from "semantic-ui-react";
export default class GlobalSearchComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
filteredData: [],
searchInput: ""
};
}
handleChange = event => {
this.setState({ searchInput: event.target.value }, () =>
this.globalSearch()
);
};
globalSearch = () => {
let { searchInput } = this.state;
let filteredData = this.props.data.filter(value => {
return (
value.firstName.toLowerCase().includes(searchInput.toLowerCase()) ||
value.status.toLowerCase().includes(searchInput.toLowerCase()) ||
value.visits
.toString()
.toLowerCase()
.includes(searchInput.toLowerCase())
);
});
this.props.handleSetData(
(filteredData.length > 0 && filteredData) || searchInput
? filteredData
: this.props.data
);
};
render() {
return (
<>
<br />
<Input
size="large"
name="searchInput"
value={this.state.searchInput || ""}
onChange={this.handleChange}
label="Search"
/>
<br />
<br />
</>
);
}
}
import React from "react";
import ReactDOM from "react-dom";
import GlobalSearchComponent from "./GlobalSearchComponent";
import ReactTable from "react-table";
import "react-table/react-table.css";
import "./styles.css";
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
data: []
columns: [],
searchInput: ""
};
}
componentDidMount() {
this.getData();
this.getColumns();
}
getColumns = () => {
let columns = [
{
Header: "First Name",
accessor: "firstName"
{
Header: "Status",
accessor: "status"
},
{
Header: "Visits",
accessor: "visits"
}
];
this.setState({ columns });
};
getData = () => {
let data = [
{ firstName: "aaaaa", status: "Pending", visits: 155 },
{ firstName: "aabFaa", status: "Pending", visits: 155 },
{ firstName: "adaAAaaa", status: "Approved", visits: 1785 },
{ firstName: "aAaaaa", status: "Approved", visits: 175 },
{ firstName: "adaSaaa", status: "Cancelled", visits: 165 },
{ firstName: "aasaaa", status: "Cancelled", visits: 157 },
{ firstName: "aweaaaaaewea", status: "Approved", visits: 153 },
{ firstName: "adaAAadsdweaa", status: "Approved", visits: 17585 },
{ firstName: "aAaaaa", status: "Approved", visits: 175 }
this.setState({ data });
};
handleSetData = data => {
console.log(data);
this.setState({ data });
};
render() {
let { data, columns } = this.state;
return (
<div>
<GlobalSearchComponent
data={this.state.data}
handleSetData={this.handleSetData}
/>
<ReactTable
data={data}
columns={columns}
defaultPageSize={10}
className="-striped -highlight"
/>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
答案 0 :(得分:1)
不更新原始数据,而是在主应用程序中更新过滤的数据。
SearchComponent
从状态中删除filteredData[]
,并将全局搜索更改为
globalSearch = () => {
let { searchInput } = this.state;
let filteredData = this.props.data.filter(value => {
return (
value.firstName.toLowerCase().includes(searchInput.toLowerCase()) ||
value.status.toLowerCase().includes(searchInput.toLowerCase()) ||
value.visits
.toString()
.toLowerCase()
.includes(searchInput.toLowerCase())
);
});
this.props.handleSetData(filteredData);
};
应用组件
更改handleSetData
以更新filteredData
而不是数据。
handleSetData = data => {
console.log(data);
this.setState({ filteredData: data });
};
getData = () => {
let data = [...]
this.setState({ data, filteredData: data });
};
// change your render to
render() {
let { filteredData, columns } = this.state;
return (
<div>
<GlobalSearchComponent
data={this.state.data}
handleSetData={this.handleSetData}
/>
<ReactTable
data={filteredData}
columns={columns}
defaultPageSize={10}
className="-striped -highlight"
/>
</div>
);
}