bee-cascader/demo/demolist/Demo2.js

Cascader ui component for react

/**
 *
 * @title 默认值
 * @description 默认值通过数组的方式指定。注：需要给数组的每一项指定label和value属性。
 *
 */

import React, { Component } from 'react';
import { Row, Col } from 'bee-layout';
import Cascader from '../../src';

const options = [{
	label: '基础组件',
	value: 'jczj',
	children: [{
		label: '导航',
		value: 'dh',
		children: [{
			label: '面包屑',
			value: 'mbx'
		},{
			label: '分页',
			value: 'fy'
		},{
			label: '标签',
			value: 'bq'
		},{
			label: '菜单',
			value: 'cd'
		}]
	},{
		label: '反馈',
		value: 'fk',
		children: [{
			label: '模态框',
			value: 'mtk'
		},{
			label: '通知',
			value: 'tz'
		}]
 	},
 	{
		label: '表单',
 	    value: 'bd'
 	}]
	},{
		label: '应用组件',
		value: 'yyzj',
		children: [{
			label: '参照',
			value: 'ref',
			children: [{
				label: '树参照',
				value: 'reftree'
			},{
				label: '表参照',
				value: 'reftable'
			},{
				label: '穿梭参照',
				value: 'reftransfer'
			}]
		}]
	}
];

const defaultOptions = [{
    label: '基础组件',
    value: 'jczj',
}, {
    label: '导航',
    value: 'dh',
}, {
    label: '菜单',
    value: 'cd',
}];

class Demo2 extends Component {

	onChange = (value, selectedOptions) => {
        console.log(value, selectedOptions);
	}
	
 	render(){
 		return(
			<Row>
				<Col md={4}>
					<div className="height-150">
                        <Cascader 
                            defaultValue={defaultOptions}
							options = {options} 
							onChange = {this.onChange}
							placeholder = "请选择"
						/>
					</div>
				</Col>
			</Row>
 		)
 	}
}
export default Demo2;