Modal和Form结合的 表单对话框 _react

Posted 2021-09-04 登陆太阳计划

版本对应 "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     }