现在使用react+antd构造一个调查问卷页面，包含单选组，复选框组，下拉框，文本框等元素，使用react函数组件快速生成相应代码，要求有完整结构和相应的数据管理，可以使用form组件统一管理

<think> 我们使用React函数组件和Ant Design构建一个调查问卷页面。页面包含以下元素： 1. 单选组 (Radio Group) 2. 复选框组 (Checkbox Group) 3. 下拉框 (Select) 4. 文本框 (Input 或 TextArea) 5. 使用Ant Design的Form组件统一管理数据 我们将创建一个名为`SurveyForm`的组件。使用Ant Design的Form组件来管理表单数据，并通过`onFinish`事件获取表单数据。 步骤： 1. 安装必要的依赖：antd 2. 导入所需的组件：Form, Input, Radio, Checkbox, Select, Button 3. 使用Form.List处理复选框组（因为复选框组通常有多个选项，且需要动态管理） 4. 使用Form.Item包裹每个表单控件，并设置name和label等属性 注意：单选组和复选框组的选项可以使用数组来定义。 代码结构如下： - 使用函数组件 - 使用Ant Design的Form组件，通过Form.useForm()创建表单实例 - 布局采用默认的垂直布局 由于问题要求完整代码，我们将构建一个完整的表单，包含提交按钮，并在提交时打印表单数据。 注意：复选框组我们使用Checkbox.Group，但注意Ant Design的Checkbox.Group要求选项数组，且每个选项有label和value。 下面给出完整代码示例： </think> 以下是使用 React 函数组件和 Ant Design 构建调查问卷页面的完整代码示例，包含表单数据管理功能： ```jsx import React from 'react'; import { Form, Input, Radio, Checkbox, Select, Button } from 'antd'; const { TextArea } = Input; const { Option } = Select; const SurveyForm = () => { const [form] = Form.useForm(); // 表单提交处理 const onFinish = (values) => { console.log('表单数据:', values); // 这里可以添加提交到后端的逻辑 }; // 重置表单 const onReset = () => { form.resetFields(); }; return ( <div style={{ maxWidth: 800, margin: '0 auto', padding: 24 }}> <h1 style={{ textAlign: 'center', marginBottom: 24 }}>用户满意度调查问卷</h1> <Form form={form} layout="vertical" onFinish={onFinish} initialValues={{ satisfaction: '4', interests: ['reading', 'travel'], contactMethod: 'email' }} > {/* 个人信息 */} <Form.Item label="姓名" name="name" rules={[{ required: true, message: '请输入您的姓名' }]} > <Input placeholder="请输入您的姓名" /> </Form.Item> {/* 单选组 */} <Form.Item label="您对我们的服务满意吗？" name="satisfaction" rules={[{ required: true, message: '请选择满意度' }]} > <Radio.Group> <Radio value="1">非常不满意</Radio> <Radio value="2">不满意</Radio> <Radio value="3">一般</Radio> <Radio value="4">满意</Radio> <Radio value="5">非常满意</Radio> </Radio.Group> </Form.Item> {/* 复选框组 */} <Form.Item label="您的兴趣爱好（可多选）" name="interests" > <Checkbox.Group> <Checkbox value="reading">阅读</Checkbox> <Checkbox value="sports">运动</Checkbox> <Checkbox value="music">音乐</Checkbox> <Checkbox value="travel">旅行</Checkbox> <Checkbox value="gaming">游戏</Checkbox> </Checkbox.Group> </Form.Item> {/* 下拉选择框 */} <Form.Item label="您偏好的联系方式" name="contactMethod" rules={[{ required: true, message: '请选择联系方式' }]} > <Select placeholder="请选择联系方式"> <Option value="email">电子邮件</Option> <Option value="phone">电话</Option> <Option value="wechat">微信</Option> <Option value="sms">短信</Option> </Select> </Form.Item> {/* 多行文本框 */} <Form.Item label="您的建议" name="suggestions" > <TextArea rows={4} placeholder="请留下您的宝贵建议" /> </Form.Item> {/* 表单操作按钮 */} <Form.Item> <Button type="primary" htmlType="submit" style={{ marginRight: 16 }}> 提交 </Button> <Button htmlType="button" onClick={onReset}> 重置 </Button> </Form.Item> </Form> </div> ); }; export default SurveyForm; ``` ### 关键功能说明 1. **表单数据管理**： - 使用 `Form.useForm()` 创建表单实例 - `initialValues` 设置表单初始值 - `onFinish` 处理提交数据 - `resetFields` 实现表单重置 2. **验证规则**： - 通过 `rules` 属性设置必填项验证 - 实时验证用户输入并提供错误反馈 3. **组件类型**： - 单选组：`Radio.Group` + `Radio` - 复选框组：`Checkbox.Group` + `Checkbox` - 下拉框：`Select` + `Option` - 文本框：`Input`（单行）和 `TextArea`（多行） 4. **数据获取**： - 提交时通过 `onFinish` 的 `values` 参数获取所有表单数据 - 可通过 `form.getFieldsValue()` 随时获取当前表单值 ### 实际应用建议 1. **动态表单字段**： ```jsx // 动态添加选项示例 const [options, setOptions] = useState([ '选项1', '选项2', '选项3' ]); // 在渲染中使用 <Select> {options.map((opt, index) => ( <Option key={index} value={opt}>{opt}</Option> ))} </Select> ``` 2. **自定义验证规则**： ```jsx rules={[ { validator: (_, value) => value && value.length > 10 ? Promise.resolve() : Promise.reject('至少输入10个字符') } ]} ``` 3. **表单布局优化**： ```jsx <Form layout="horizontal" labelCol={{ span: 6 }} wrapperCol={{ span: 14 }}> ``` 4. **表单数据提交处理**： ```jsx const onFinish = async (values) => { try { const response = await axios.post('/api/survey', values); console.log('提交成功:', response.data); } catch (error) { console.error('提交失败:', error); } }; ``` 此实现完全使用 Ant Design 的 Form 组件管理数据，符合 React 函数组件的最佳实践，表单数据会自动收集和验证，适合大多数问卷调查场景。