用Ant Design组件写一个form表单,第一项是单选框,第二项是输入款
时间: 2024-10-13 21:13:26 浏览: 35
在Ant Design库中,你可以很容易地创建一个包含单选按钮和输入框的表单。下面是一个基本的例子:
```jsx
import { Form, Input, Radio } from 'antd';
const FormItem = Form.Item;
const Option = Radio.Option;
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} layout="inline">
<FormItem label="选择性别" hasFeedback>
{getFieldDecorator('gender', {
rules: [{ type: 'enum', enum: ['male', 'female'], message: '请选择有效性别' }],
})(
<Radio.Group>
<Option value="male">男</Option>
<Option value="female">女</Option>
</Radio.Group>
)}
</FormItem>
<FormItem label="姓名">
{getFieldDecorator('name', {})(<Input placeholder="请输入姓名" />)}
</FormItem>
<FormItem wrapperCol={{ offset: 8 }}>
<Button type="primary" htmlType="submit">
提交
</Button>
</FormItem>
</Form>
);
}
}
const WrappedMyForm = Form.create()(MyForm);
export default WrappedMyForm;
```
在这个例子中,我们使用了`Form`, `Input`和`Radio`组件来自Ant Design。`getFieldDecorator`用于将React控件与Form的验证和状态管理关联起来。
阅读全文