在react和antd下,用form.item包裹一个radio.group,并在该项旁边加一个问号图标 鼠标移上去可显示提示信息
时间: 2024-02-24 13:58:20 浏览: 19
你可以使用Ant Design的Tooltip组件来给Radio.Group旁边的问号图标添加提示信息。具体实现步骤如下:
1. 导入Tooltip组件:
```
import { Tooltip } from 'antd';
```
2. 在Form.Item中添加Radio.Group和Tooltip组件:
```
<Form.Item label="Label" name="name">
<Radio.Group>
<Radio value={1}>Option 1</Radio>
<Radio value={2}>Option 2</Radio>
<Radio value={3}>Option 3</Radio>
</Radio.Group>
<Tooltip title="提示信息">
<QuestionCircleOutlined />
</Tooltip>
</Form.Item>
```
这样就可以在Radio.Group旁边添加一个问号图标,并在鼠标移上去时显示提示信息了。
相关问题
在react和antd下,为什么form.item包裹一个radio.group,并在该项旁边加一个鼠标移上去可显示提示信息的问号图标,不能获取radio.group的值,其中form.item的label和radio.group的name都是省份二级运营
在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')来获取选中的值。
在react和antd下,怎么使col中的两个form.item在同一水平线
?
您好!针对您的问题,您可以在同一个row中使用两个col来分别放置两个form.item,设置对应的span值以调整宽度大小,例如:
<Row>
<Col span={12}>
<Form.Item label="Label1">
<Input />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label="Label2">
<Input />
</Form.Item>
</Col>
</Row>
这样两个form.item就可以在同一水平线中显示。希望我的回答对您有所帮助。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)