radio两级联动
作者:互联网
const all = ['全部', '监管产品', '可持续发展项目', '浙江分布式', '数据治理', '基础研究', '安全相关']
const base = ['监管产品', '可持续发展项目']
const promote = ['浙江分布式', '数据治理', '基础研究', '安全相关']
const [radioValue,setRadioValue] = useState(all) const radioChange = (e: any) => { switch (e.target.value) { case '全部': setRadioValue(all) break case '基础开发': setRadioValue(base) break case '推动平台在各地局的应用': setRadioValue(promote) break default: setRadioValue(all) } }
html:
<Form.Item name="radioCategoryOne" label="项目一类"> <Radio.Group defaultValue="全部" onChange={radioChange} buttonStyle="solid"> <Space> <Radio.Button value="全部">全部</Radio.Button> <Radio.Button value="基础开发">基础开发</Radio.Button> <Radio.Button value="推动平台在各地局的应用">推动平台在各地局的应用</Radio.Button> </Space> </Radio.Group> </Form.Item> <Form.Item name="radioCategoryTwo" label="项目二类"> <Radio.Group defaultValue="全部" buttonStyle="solid"> <Space> {radioValue.map((item: string, index: number) => { return ( <Radio.Button value={item} key={index}> {item} </Radio.Button> ) })} </Space> </Radio.Group> </Form.Item>
标签:case,const,两级,break,base,radio,联动,radioValue,setRadioValue 来源: https://www.cnblogs.com/z8g1z7/p/15636554.html