@aliretail/react-materials-components/demo/TreeSelector/dataSource.md

B 端物料组件库

---
title: TradeTable-Usage
order: 3
---

```jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import { Checkbox } from '@alifd/next';
import { TreeSelector } from '@aliretail/react-materials-components';

const dataSource = [
  {
    gmtModified: '2021-03-25 14:21:38',
    bizType: 'PLATFORM',
    creatorId: '1000000001',
    modifierId: '1000000001',
    gmtCreate: '2021-03-25 14:21:38',
    type: '3',
    parentId: '219252322748805935',
    children: [
      {
        gmtModified: '2021-04-22 15:32:39',
        bizType: 'PLATFORM',
        hasChildren: true,
        creatorId: '219259180593144555',
        modifierId: '219259180593144555',
        gmtCreate: '2021-04-22 15:32:39',
        type: '3',
        parentId: '219252322748805935',
        children: [],
        bizId: '1',
        name: 'test',
        id: '229417116864030149',
        status: 1,
      },
    ],
    bizId: '1',
    name: 'POS001-1',
    id: '219252386559496330',
    status: 1,
  },
  {
    gmtModified: '2021-04-22 15:32:39',
    bizType: 'PLATFORM',
    creatorId: '219259180593144555',
    modifierId: '219259180593144555',
    gmtCreate: '2021-04-22 15:32:39',
    type: '3',
    parentId: '219252322748805935',
    children: [],
    bizId: '1',
    name: 'test2',
    id: '229417273605169777',
    status: 1,
  },
];

class App extends Component {
  state = {
    value: '',
    multiple: false,
  };

  onChange(val, obj) {
    console.log('onChange', val, obj);
    this.setState({
      value: val,
    });
  }

  handleCheck(v) {
    this.setState({
      multiple: v,
    });
  }

  render() {
    const { multiple } = this.state;

    return (
      <div>
        <label className="multiple-check">
          <Checkbox checked={multiple} onChange={this.handleCheck.bind(this)} />
          <span className="multiple-text">允许多选</span>
        </label>
        <br />
        <TreeSelector
          dataSource={dataSource}
          primaryValueKey="id"
          primaryLabelKey="name"
          onChange={this.onChange.bind(this)}
          value={this.state.value}
          multiple={multiple}
        />
      </div>
    );
  }
}
ReactDOM.render(<App />, mountNode);

/* deploy 工程 */
```