其他分享
首页 > 其他分享> > radio两级联动

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