使用Radio.Group动态定义value失效

最新推荐文章于 2025-05-23 16:49:04 发布

原创最新推荐文章于 2025-05-23 16:49:04 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #react.js

本文探讨了在使用Ant Design的Radio.Group组件时遇到的问题，即动态设置value属性导致Radio按钮无法正常工作。作者通过实例代码展示了问题的具体情况，并分享了解决方案，即利用Form包裹Radio.Group，通过Form的setFieldsValue方法来设置初始值，并将onChange事件放在Form上，从而确保Radio按钮可以正确响应变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用Radio.Group动态定义value失效

最近有一个功能，大概就是使用了antd中Radio.Group，初始化渲染时会有一个val值从接口拿到，渲染完成后，该Radio按钮可以修改，但我直接设置value拿到val值后，点击Radio无效了

<Radio.Group  onChange={onChange2} value={a.commentListRequest?.case_category} >
       <Radio value={'优秀案例'}>优秀案例</Radio>
       <Radio value={'待改善案例'}>待改善案例</Radio>
</Radio.Group>

此时触发change2后，页面radio点不动
于是去找了一下，发现用form就可以完美解决。

const [form] = Form.useForm()
form.setFieldsValue({ "radio-group": k);//k为变量
.....
<Form
      name="validate_other"
      form={form}
      onChange={onChange2}//onchange不能写在Radio.Group上了，会无法触发
    >
      <Form.Item name="radio-group" >
           <Radio.Group  value={a.commentListRequest?.case_category} className={styles.radio}>
               <Radio value={'优秀案例'}>优秀案例</Radio>
               <Radio value={'待改善案例'}>待改善案例</Radio>
           </Radio.Group>
      </Form.Item>
</Form>