关于react.js:Modal和Form结合的-表单对话框-react

版本对应 “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} = Input

class 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     }