antd-pro中单选按钮获取默认值
时间: 2024-05-06 15:19:41 浏览: 92
在antd-pro中,可以使用`Radio.Group`组件来实现单选按钮。如果要获取单选按钮的默认值,可以通过以下两种方式实现:
1. 使用`defaultValue`属性来设置默认值,然后在`onChange`事件中获取当前选中的值。
```jsx
import { Radio } from 'antd';
function MyComponent() {
const [value, setValue] = useState('A');
const onChange = e => {
console.log('radio checked', e.target.value);
setValue(e.target.value);
};
return (
<Radio.Group onChange={onChange} defaultValue={value}>
<Radio value="A">Option A</Radio>
<Radio value="B">Option B</Radio>
<Radio value="C">Option C</Radio>
<Radio value="D">Option D</Radio>
</Radio.Group>
);
}
```
2. 使用`value`属性来控制选中的值,然后在`onChange`事件中更新当前选中的值。
```jsx
import { Radio } from 'antd';
function MyComponent() {
const [value, setValue] = useState('A');
const onChange = e => {
console.log('radio checked', e.target.value);
setValue(e.target.value);
};
return (
<Radio.Group onChange={onChange} value={value}>
<Radio value="A">Option A</Radio>
<Radio value="B">Option B</Radio>
<Radio value="C">Option C</Radio>
<Radio value="D">Option D</Radio>
</Radio.Group>
);
}
```
阅读全文