剑道反应树列表 - 根据外部下拉选择选择/取消选择复选框列的值

Question

我有一个共享组件TreeList，如下所示：TreeList.jsx

<KendoTreeList
style={getStyle()}
tableProps={{ ref: table => (thisTable = table) }}
rowHeight={rowHeight}
scrollable="virtual"
data={processData()}
expandField={EXPAND_FIELD}
subItemsField={SUB_ITEMS_FIELD}
onExpandChange={onExpandChange}
sortable
onSortChange={handleSortChange}
sort={sort}
columns={columnDefinitions}
resizable
onColumnResize={onColumnResize}
rowRender={renderRow}
dataItemKey={idField}
columnMenuFilter={filter}
onColumnMenuFilterChange={handleFilterChange}
reorderable
onColumnReorder={onColumnReorder}
selectedField={selectedField}
onSelectionChange={handleSelectionChange}
onHeaderSelectionChange={handleHeaderSelectionChange}
/>

它具有从道具访问的值和在本演示中实现的复选框的方法：https://www.telerik.com/kendo-react-ui/components/treelist/selection/#toc-自定义选择

现在，在正常情况下，选择和取消选择都很好，但我无法根据外部下拉列表中的值来实现这一点。例如，我有一个包含选项1、选项2和选项3的外部下拉列表。如果用户选择了选项1，那么上面的组件将从我的Dropdown组件(比如selectedOption(接收其值作为道具，如果我在树列表上选择了几个记录。现在，如果我将下拉列表的选择更改为选项2，我希望所有复选框都应取消选中。我无法做到这一点。

任何建议都会有所帮助。TIA。

Answer 1

我添加了selectedOption作为TreeList组件的道具。

App组件：

import * as React from "react";
import * as ReactDOM from "react-dom";
import MyTreeList from "./TreeList";
import { DropDownList } from "@progress/kendo-react-dropdowns";
import { Label } from '@progress/kendo-react-labels';
class App extends React.Component {
options = ["Option 1", "Option 2", "Option 3"];
state = { selectedOption: '' };
onChange = (e) => {
this.setState({selectedOption: e.value});
}
render() {
return (
<div>
<Label>Your option:&nbsp;</Label>
<DropDownList data={this.options} onChange={(e) => this.onChange(e)}/>
<br />
<br />
<MyTreeList selectedOption={this.state.selectedOption}/>
</div>
);
}
}
ReactDOM.render(<App />, document.querySelector("my-app"));

使用componentDidUpdate挂钩，我检查了您的选择，并根据您的需要更新了列表。

TreeList组件：

import * as React from "react";
import {
TreeList,
mapTree,
extendDataItem,
TreeListSelectionCell,
TreeListHeaderSelectionCell
} from "@progress/kendo-react-treelist";
import employees from "./data";
const subItemsField = "employees";
const expandField = "expanded";
const selectField = "selected";
export default class MyTreeList extends React.Component {
state = {
data: employees.slice(),
expanded: [1, 2, 32],
selected: []
};
handleRowClick = e => {
const selected = e.dataItem.selected
? this.state.selected.filter(x => x !== e.dataItem.id)
: [...this.state.selected, e.dataItem.id];
this.setState({ selected });
};
onExpandChange = e => {
this.setState({
expanded: e.value
? this.state.expanded.filter(id => id !== e.dataItem.id)
: [...this.state.expanded, e.dataItem.id]
});
};
updateFields = dataArr => {
const { expanded, selected } = this.state;
return mapTree(dataArr, subItemsField, item =>
extendDataItem(item, subItemsField, {
expanded: expanded.includes(item.id),
selected: selected.includes(item.id)
})
);
};
onSelectionChange = event => {
this.changeSelection(event.dataItem);
};
changeSelection = dataItem => {
const selected = dataItem.selected
? this.state.selected.filter(x => x !== dataItem.id)
: [...this.state.selected, dataItem.id];
this.setState({ selected });
};
onRowClick = event => {
this.changeSelection(event.dataItem);
};
onHeaderSelectionChange = event => {
const checked = event.syntheticEvent.target.checked;
const selected = [];
if (checked) {
mapTree(this.state.data, subItemsField, item => {
selected.push(item.id);
return item;
});
}
this.setState({ selected });
};
headerSelectionValue = () => {
let allSelected = true;
const selected = this.state.selected;
mapTree(this.state.data, subItemsField, item => {
allSelected = allSelected && selected.includes(item.id);
return item;
});
return allSelected;
};
clearSelection() {
this.setState({ selected: [] });
}
componentDidUpdate(prevProps) {
if (prevProps.selectedOption !== this.props.selectedOption) {
var selectedOption = this.props.selectedOption;
switch (selectedOption) {
case "Option 1":
this.setState({ selected: [1, 2, 3] });
break;
case "Option 2":
this.clearSelection();
break;
case "Option 3":
break;
}
}
}
render() {
return (
<div>
<TreeList
style={{ maxHeight: "510px", overflow: "auto" }}
data={this.updateFields(this.state.data)}
selectedField={selectField}
onSelectionChange={this.onSelectionChange}
onHeaderSelectionChange={this.onHeaderSelectionChange}
onRowClick={this.onRowClick}
expandField={expandField}
subItemsField={subItemsField}
onExpandChange={this.onExpandChange}
columns={[
{
field: "selected",
width: "7%",
headerSelectionValue: this.headerSelectionValue(),
cell: TreeListSelectionCell,
headerCell: TreeListHeaderSelectionCell
},
{ field: "name", title: "Name", expandable: true, width: "31%" },
{ field: "position", title: "Position", width: "31%" },
{
field: "hireDate",
title: "Hire Date",
format: "{0:d}",
width: "31%"
}
]}
/>
</div>
);
}
}

工作演示在StackBlitz。