在react和antd下,为什么form.item包裹一个radio.group,并在该项旁边加一个鼠标移上去可显示提示信息的问号图标,不能获取radio.group的值,其中form.item的label和radio.group的name都是省份二级运营
时间: 2024-02-24 07:56:56 浏览: 70
在React和Antd下,当Form.Item包裹Radio.Group时,可以使用getFieldDecorator方法来获取Radio.Group的值。具体实现可以参考以下代码示例:
```jsx
import { Form, Radio, Icon } from 'antd';
const FormItem = Form.Item;
class MyForm extends React.Component {
handleSubmit = e => {
e.preventDefault();
this.props.form.validateFields((err, values) => {
if (!err) {
console.log('Received values of form: ', values);
}
});
};
render() {
const { getFieldDecorator } = this.props.form;
return (
<Form onSubmit={this.handleSubmit}>
<FormItem label="省份二级运营">
{getFieldDecorator('province', {
rules: [{ required: true, message: 'Please select your province!' }],
})(
<Radio.Group>
<Radio value="1">Option 1</Radio>
<Radio value="2">Option 2</Radio>
<Radio value="3">Option 3</Radio>
</Radio.Group>,
)}
<Icon type="question-circle-o" title="提示信息" />
</FormItem>
</Form>
);
}
}
export default Form.create()(MyForm);
```
在上述代码中,我们使用getFieldDecorator方法来绑定Radio.Group的值到表单中,并定义了一个名为"province"的字段,然后在FormItem的标签旁边加上了一个提示信息的问号图标。当用户选中Radio.Group中的选项时,我们就可以通过this.props.form.getFieldValue('province')来获取选中的值。
阅读全文