radio两级联动

2021-12-03 09:33:15 阅读：122 来源： 互联网

标签：case const 两级 break base radio 联动 radioValue setRadioValue

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

radio两级联动