最近、「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 を使用できません)。
私のコードは、このフォーラム用に少し変更されており、テスト データを使用して実際のサーバーからの REST API 呼び出しをシミュレートするために、パブリック JSONPlaceholder Web サイトを指しています。うまくいけば、それを実行できます。ここに私の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 コードを置き換えたときに機能するため、コード自体は問題なく、すべてのデバッグ ログがコンソールに表示されます。内部関数も呼び出されます。これを機能させるために少し助けがあれば、アロー関数を使用できてうれしいです。
クラス ベースではない Basic Filter バージョンも作成しましたが、サーバーから非常に巨大な JSON データをロードするときに問題が発生します。それ以上は調査しませんでしたが、タイミングの問題だったと思います。
この問題により、テーブルがブラウザに読み込まれ、右上隅にある [Filter Rows] ボタンをクリックできます。これにより、検索編集ボックスが折りたたまれ、文字を入力できますが、文字を入力しているときにテーブルがその場でフィルター処理されません。