我正在尝试实现一个搜索过滤器,用于搜索整个表中的字符。过滤器未正确应用。我正在使用react-table作为数据网格。我在每个输入上触发更改处理程序,然后使用过滤器过滤掉数据。无法实现相同的目标
如果有帮助,我们将不胜感激。
https://codesandbox.io/s/happy-hooks-tblde
import React from "react";
import ReactDOM from "react-dom";
import { Input } from "semantic-ui-react";
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: [],
filteredData: [],
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 },
{ firstName: "adadsdSaaa", status: "Cancelled", visits: 165 }
];
this.setState({ data });
};
handleChange = event => {
this.setState({ searchInput: event.target.value }, () => {
this.globalSearch();
});
};
globalSearch = () => {
let { data, searchInput } = this.state;
let filteredData = data.filter(value => {
return (
value.firstName.toLowerCase().includes(searchInput.toLowerCase()) ||
value.status.toLowerCase().includes(searchInput.toLowerCase()) ||
value.visits
.toString()
.toLowerCase()
.includes(searchInput.toLowerCase())
);
});
this.setState({ filteredData });
};
render() {
let { data, columns, searchInput, filteredData } = this.state;
return (
<div>
<Input
size="large"
name="searchInput"
value={searchInput || ""}
onChange={this.handleChange}
label="Search"
/>
<ReactTable
data={filteredData.length > 0 && filteredData ? filteredData : data}
columns={columns}
defaultPageSize={10}
className="-striped -highlight"
/>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
最佳答案
在您的第二种方法中,错误来自handleSetData = data =>{this.setState({data});};
您正在根据filterdata更改数据状态,这就是为什么您的数据会消失您需要做的是传递设置数据过滤器状态,如下所示:
handleSetData = data => {this.setState({filteredData: data });};
并且在
ReactTable
你需要像这样渲染FilterData
或data
:
数据={this.state.filteredData ? this.state.filteredData : 数据}
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: [],
filteredData: null,
columns: [],
searchInput: ""
};
}
componentDidMount() {
this.getData();
this.getColumns();
}
getColumns = () => {
let columns = [
{
Header: "First Name",
accessor: "firstName",
sortable: false,
show: true,
displayValue: " First Name"
},
{
Header: "Status",
accessor: "status",
sortable: false,
show: true,
displayValue: "Status "
},
{
Header: "Visits",
accessor: "visits",
sortable: false,
show: true,
displayValue: " 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 },
{ firstName: "adadsdSaaa", status: "Cancelled", visits: 165 },
{ firstName: "dsdcdaaaaa", status: "Cancelled", visits: 157 },
{ firstName: "aaadvsaa", status: "Submitted", visits: 5153 },
{ firstName: "aaaaswea", status: "Pending", visits: 1555 },
{ firstName: "aaaaauwe", status: "Submitted", visits: 155 }
];
this.setState({ data });
};
handleSetData = data => {
this.setState({ filteredData: data });
};
render() {
let { data, columns } = this.state;
return (
<div>
<GlobalSearchComponent
data={this.state.data}
handleSetData={this.handleSetData}
/>
<ReactTable
data={this.state.filteredData ? this.state.filteredData : data}
columns={columns}
defaultPageSize={10}
className="-striped -highlight"
/>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
关于javascript - 更改输入文本时不会应用过滤器 : ReactJS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56846760/