版本对应 "antd": "^3.26.14",
如果发现报错
antd__WEBPACK_IMPORTED_MODULE_1__.Form.create(...) is not a function可参考尝试 指定版本yarn add antd@^3.26.14 -S
compponentName.js
import React from 'react';import { Form, Input, InputNumber } from 'antd';const { TextArea } = Inputclass EditForm extends React.Component { constructor(props) { super(props); } componentWillMount() { } componentWillReceiveProps(nextProps) { } componentDidMount() { } render() { const { getFieldDecorator } = this.props.form; return <Form labelCol={{ span: 6 }} wrapperCol={{ span: 12 }}> <Form.Item label="账户" > {getFieldDecorator('username', { rules: [ { required: true, message: '账户', }, ], initialValue: this.props.username })(<Input />)} </Form.Item> <Form.Item label="代码"> {getFieldDecorator('code', { rules: [ { required: true, message: '代码', }, ], initialValue: this.props.code })(<Input />)} </Form.Item> <Form.Item label="备注"> {getFieldDecorator('remark', { rules: [ { message: '备注', }, ], initialValue: this.props.remark })( <TextArea row={6} />, )} </Form.Item> </Form> }}export default Form.create()(EditForm);引入与应用
import { Modal } from 'antd';import EditFormfrom '../../../components/EditForm'... <Modal title="表单操作" okText='保留' cancelText='勾销' visible={this.state.parasWindowVisible} onOk={this._handleOK} onCancel={this._handleCancel} > <ParamsSet wrappedComponentRef={(inst) => { this.editForm = inst; }} {...this.state.Editinfo} /> </Modal>...._handleAdd = () => { 70 //点击按钮显示模态框 71 this.setState({ visible: true, }); 72 } 73 _handleDelete = (record) => { 74 //删除记录操作 75 } 76 _handleOK = () => { 77 //验证表单数据 78 this.editForm.props.form.validateFields((err, values) => { 79 if (!err) { 80 //values 可获取到表单中所有键值数据 将数据进行保留操作 81 // 清理表单数据 82 this.editForm.props.form.resetFields(); 83 } 84 }); 85 } 86 _handleCancel = () => { 87 // 清理表单数据 88 this.editForm.props.form.resetFields(); 89 //暗藏模态框 90 this.setState({ visible: false }); 91 } 92 _handleUpdate = (record) => { 93 //批改时，赋值表单数据 94 let Editinfo = { 95 username: record.username, 96 code: record.code, 97 remark: record.remark, 98 } 99 this.setState({ visible: true, Editinfo });100 }