1
私は、ユーザーが複数の行を選択できるデータグリッドコンポーネントを持っています。コンポーネントは、現在選択されている行を状態の一部として管理します。グローバルイベントのコンポーネントに通知する最も良い方法
var Datagrid = React.createClass({
getInitialState() {
return {
selection: []
}
},
handleRowClick(id, event) {
if (event.ctrlKey) {
this.setState({ selection.concat([id]) });
}
},
render() {
return
<div>
{this.props.data.map(rowdata => <Row data={rowdata}>)}
</div>
;
}
});
ReactDOM.render(<Datagrid data={data}>, document.querySelector('#grid1'))
これは実際には選択ロジックをうまくカプセル化します。
しかし、ここでは、ページ本文をクリックするとすべての行の選択を解除します。
グローバルストアで、すべてのデータグリッドの選択を管理して、選択を解除できるようにするのは面倒です。私は選択ロジックがコンポーネントにカプセル化されていて、そのグローバルイベントを通知したいと思っています。
私は自分自身をリセット小道具としてコールバックを渡すのアイデアを持っていたが、それは非常に複雑なようだ：
var notification = false;
body.onclick = function() {
notification = function() { notification = false; } // Marks a pending notification
ReactDOM.render(<Datagrid data={data} notification={notification}>, document.querySelector('#grid1'))
}
var Datagrid = React.createClass({
...
render() {
if (this.props.notification) {
this.setState({ selection: [] });
this.props.notification(); // Reset the notification
}
...
}
});
ReactDOM.render(<Datagrid data={data} notification={notification}>, document.querySelector('#grid1'))
は、より良い方法はありますか？
var Datagrid = React.createClass({
getInitialState() {
return {
selection: []
}
},
componentDidMount() {
document.body.addEventListener('click', this.handleClear);
},
componentWillUnmount() {
document.body.removeEventListener('click', this.handleClear);
},
handleClear() {
this.setState({ selection: []});
},
handleRowClick(id, event) {
if (event.ctrlKey) {
this.setState({ selection.concat([id]) });
}
},
render() {
return
<div>
{this.props.data.map(rowdata => <Row data={rowdata}>)}
</div>
;
}
});