mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-15 17:31:25 +08:00
1.2 KiB
1.2 KiB
order | title |
---|---|
8 | 自定义已选项 |
例如给最后一项加上邮编链接。
import { Cascader } from 'antd';
const options = [{
value: 'zhejiang',
label: '浙江',
children: [{
value: 'hangzhou',
label: '杭州',
children: [{
value: 'xihu',
label: '西湖',
code: 752100,
}],
}],
}, {
value: 'jiangsu',
label: '江苏',
children: [{
value: 'nanjing',
label: '南京',
children: [{
value: 'zhonghuamen',
label: '中华门',
code: 453400,
}],
}],
}];
function handleAreaClick(e, label, option) {
e.stopPropagation();
console.log('点击了', label, option);
}
const displayRender = (labels, selectedOptions) => labels.map((label, i) => {
const option = selectedOptions[i];
if (i === labels.length - 1) {
return (
<span key={option.value}>
{label} (<a onClick={(e) => handleAreaClick(e, label, option)}>{option.code}</a>)
</span>
);
}
return <span key={option.value}>{label} / </span>;
});
ReactDOM.render(
<Cascader
options={options}
defaultValue={['zhejiang', 'hangzhou', 'xihu']}
displayRender={displayRender}
style={{ width: 200 }}
/>
, mountNode);