Ant Design Mobile Picker 数据与 Form 提交 - 实用指南

要将 ant design mobile picker 的数据与 form 一起提交，你需要使用 form 的 getFieldDecorator 方法来获取 picker 的值，并将其作为 form 的一个字段进行提交。以下是一个示例代码：\n\njavascript\nimport { Form, DatePicker, Button } from 'antd-mobile';\nimport { createForm } from 'rc-form';\n\nclass MyForm extends React.Component {\n handleSubmit = (e) => {\n e.preventDefault();\n this.props.form.validateFields((error, values) => {\n if (!error) {\n // 在这里可以获取到 picker 的值并与其他表单字段一起提交\n console.log(values);\n }\n });\n }\n\n render() {\n const { getFieldProps } = this.props.form;\n\n return (\n <Form onSubmit={this.handleSubmit}>\n <Form.Item>\n <DatePicker\n {...getFieldProps('date')}\n mode="date"\n >\n <Button>选择日期</Button>\n </DatePicker>\n </Form.Item>\n <Form.Item>\n <Button type="primary" htmlType="submit">提交</Button>\n </Form.Item>\n </Form>\n );\n }\n}\n\nconst WrappedMyForm = createForm()(MyForm);\n\n\n在上面的示例中，通过 getFieldProps 方法将 picker 的值与 form 关联起来，并将其作为一个字段（这里是'date'）进行提交。在 handleSubmit 方法中，可以通过 this.props.form.validateFields 来获取所有表单字段的值，包括 picker 的值。你可以在这个方法内进行提交数据的操作。