antd控件用法

1.TreeSelect

import { TreeSelect } from 'antd';
const TreeNode = TreeSelect.TreeNode;

class Demo extends React.Component {
  state = {
    value: undefined,
  }
  onChange = (value) => {
    console.log(arguments);
    this.setState({ value });
  }
  render() {
  ##定义下拉树的数据
    const bizProductCodeTree=[
      {
        bizProductCode:'10',
        bizProductCodeName:'头寸管理',
        children:[
          {
            bizProductCode:'101010',
            bizProductCodeName:'头寸户-头寸户',
            children:[
              {
                bizProductCode:'10101010002000',
                bizProductCodeName:'银存户-在途户',
                children:[]
              },{
                bizProductCode:'10101010002001',
                bizProductCodeName:'银存户-在途户',
                children:[]
              }
            ]
          } 
        ]
      },{
      bizProductCode:'30',
      bizProductCodeName:'清算管理',
      children:[
        {
          bizProductCode:'301020',
          bizProductCodeName:'头寸户-待清算',
          children:[
            {
              bizProductCode:'30102010009000',
              bizProductCodeName:'银存户-应清算',
              children:[]
            }
          ]
        },{
          bizProductCode:'302020',
          bizProductCodeName:'待清算-待清算',
          children:[
            {
              bizProductCode:'30202011009000',
              bizProductCodeName:'充值待清算-应清算',
              children:[]
            },{
              bizProductCode:'30202012009000',
              bizProductCodeName:'提现待清算-应清算',
              children:[]
            }
          ]
        }  
      ]
    }];
    //产品码树迭代
    const loop = (productCodeTree = []) => productCodeTree.map((o) => {
      if (o.children.length > 0) {
        return <TreeNode key={o.bizProductCode} value={o.bizProductCode} search={o.bizProductCodeName}
            title={<span title=''>({o.bizProductCode}){o.bizProductCodeName}</span>}>
            {loop(o.children)}</TreeNode>;
      } else {
        return <TreeNode key={o.bizProductCode} value={o.bizProductCode} search={o.bizProductCodeName}
            title={<span title=''>({o.bizProductCode}){o.bizProductCodeName}</span>} />;
      }
    });
    return (
      <TreeSelect
                    showSearch
                    style={{ width: 300 }}
                    dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                    placeholder="Please select"
                    allowClear
                    treeDefaultExpandAll
                    onChange={this.onChange}
                  >
                   {loop(bizProductCodeTree ? bizProductCodeTree : [])}
                  </TreeSelect>
    );
  }
}

ReactDOM.render(<Demo />, mountNode);

2.select分组多选

<Select
                  defaultValue="lucy"
                  style={{ width: 200 }}
                  multiple
                >
                  <OptGroup label="Manager" key="Manager">
                    <Option value="jack">Jack</Option>
                    <Option value="lucy">Lucy</Option>
                  </OptGroup>
                  <OptGroup label="Engineer" key="Engineer">
                    <Option value="Yiminghe">yiminghe</Option>
                  </OptGroup>
                </Select>