我最近正在更多地探索“react-data-grid”,并试图让基本过滤功能在我的 React 应用程序中工作。这是我正在查看的他们的基本过滤示例:
http://adazzle.github.io/react-data-grid/docs/examples/column-filtering
他们在代码沙箱中的示例代码: https ://codesandbox.io/s/w6jvml4v45 ?from-embed
我将大部分代码工件示例复制到我的类组件中,并尝试为 React 的 useState() 找到等效的解决方案(我对 React 很陌生,而 useState 显然在类中不可用)。
我的代码已针对该论坛稍作修改,并指向公共 JSONPlaceholder 网站,以模拟来自带有测试数据的真实服务器的 REST API 调用。所以希望你可以运行它。这是我的 App.js 代码:
import React, { Component } from "react";
import ReactDataGrid from "react-data-grid";
import { Toolbar, Data } from "react-data-grid-addons";
import "./App.css";
import "bootstrap/dist/css/bootstrap.css";
const defaultColumnProperties = {
filterable: true,
width: 120,
editable: true
};
const columns = [
{ key: "id", name: "ID" },
{ key: "username", name: "Username" },
{ key: "email", name: "Email" }
].map(c => ({ ...c, ...defaultColumnProperties }));
function getRows(rows, filters) {
const selectors = Data.Selectors;
return selectors.getRows({ rows, filters });
}
class App extends Component {
constructor(props) {
super(props);
this.state = {
rows: [],
isLoaded: false,
filters: {},
setFilters: {}
};
}
componentDidMount() {
fetch("https://jsonplaceholder.typicode.com/users")
.then(res => res.json())
.then(json => {
this.setState({
isLoaded: true,
rows: json
});
});
}
onGridRowsUpdated = ({ fromRow, toRow, updated }) => {
this.setState(state => {
const rows = state.rows.slice();
for (let i = fromRow; i <= toRow; i++) {
rows[i] = { ...rows[i], ...updated };
}
return { rows };
});
};
render() {
// const [filters, setFilters] = useState({});
const filteredRows = getRows(this.state.rows, this.state.filters);
// Commenting ORIGINAL handleFilterChange example code temporarily
// const handleFilterChange = filter => filters => {
// const newFilters = { ...filters };
// if (filter.filterTerm) {
// newFilters[filter.column.key] = filter;
// } else {
// delete newFilters[filter.column.key];
// }
// return newFilters;
// };
// Temporarily rewrote handleFilterChange function for DEBUGGING purpose and not using arrow fucntions
// Used babeljs.io to generate non arrow based handleFilterChange function.
var handleFilterChange = function handleFilterChange(filter) {
debugger;
console.log("handleFilterChange(filter)" + filter);
return function(filters) {
debugger;
console.log("function(filters)" + filters);
var newFilters = { ...filters };
if (filter.filterTerm) {
newFilters[filter.column.key] = filter;
} else {
delete newFilters[filter.column.key];
}
return newFilters;
};
};
return (
<ReactDataGrid
columns={columns}
rowGetter={i => filteredRows[i]}
rowsCount={filteredRows.length}
minHeight={500}
toolbar={<Toolbar enableFilter={true} />}
onAddFilter={filter =>
this.setState({ setFilters: handleFilterChange(filter) })
}
onClearFilters={() => this.setState({ setFilter: {} })}
/>
);
}
}
export default App;
根据上面代码示例中的注释,我使用 babeljs.io 生成了一个非基于箭头的 handleFilterChange 函数并添加了一些日志和调试语句
由于某种原因,嵌套函数:
return function(filters) {
var newFilters = {
...filters
};
if (filter.filterTerm) {
newFilters[filter.column.key] = filter;
} else {
delete newFilters[filter.column.key];
}
没有被调用。Chrome 中的调试器没有达到断点或打印出我添加的任何调试日志。
这个日志总是被调用:
console.log("handleFilterChange(filter)" + filter);
内部函数中的这个日志永远不会被调用,我认为这是问题所在?
console.log("function(filters)" + filters);
当我在他们的示例中使用基于非箭头函数的 handleFilterChange 并替换了他们的 handleFilterChange 代码时,它可以工作,所以我相信代码本身很好,并且所有调试日志都出现在控制台中。内部函数也被调用。很高兴使用箭头功能,但如果我能得到一些帮助来让它工作的话。
我还编写了一个不基于类的基本过滤器版本,但在从服务器加载相当大的 JSON 数据时遇到了问题。没有进一步调查,但我认为这是一个时间问题。
由于这个问题,表格被加载到浏览器中,我可以点击右上角的“过滤行”按钮。这将折叠搜索编辑框,我可以输入字母,但在输入字母时表格不会被即时过滤。