0

我有一个共享组件 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-customizing-the-选择

现在，选择和取消选择在正常情况下工作正常，但我无法根据外部下拉列表中的值实现这一点。因此，例如，我有一个带有选项 1、选项 2 和选项 3 的外部下拉列表。如果用户选择了选项 1，则上述组件将从我的下拉组件接收其值作为道具，比如说selectedOption，如果我'在树列表中选择了几条记录。现在，如果我将下拉菜单的选择更改为选项 2，我希望取消选中所有复选框。我无法做到这一点。

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

4

1 回答 1

0

我已添加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工作演示。

于 2021-04-02T16:10:45.960 回答