React-Modal弹出表单组件操作

React-Modal弹出表单组件操作

1，新建一个表单组件  EditForm.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);

2，在界面组件中导入表单组件 EditForm

import React from 'react';
import { Modal, Table, Popconfirm, Divider, Button } from 'antd';
import EditForm from './EditForm'


class PageDemo extends React.Component {
    state = {
        visible: false,
        list: [],
        invinfo: {
            username: '',
            code: '',
            remark: '',
        }
    }
    componentDidMount() {
        //获取表格list数据
    }

    render() {
        const columns = [

            {
                title: '账户',
                dataIndex: 'username'
            },
            {
                title: '代码',
                dataIndex: 'code'
            },
            {
                title: '备注',
                dataIndex: 'remark'
            },
            {
                title: '操作',
                key: 'action',
                render: (text, record) => (
                    <span>
                        <a className='a_edit' onClick={() => this._handleUpdate(record)}>修改</a>
                        <Divider type="vertical" />
                        <Popconfirm title="确认删除?" okText='删除' cancelText='取消' onConfirm={() => this._handleDelete(record)}>
                            <a style={{ color: 'red' }}>删除</a>
                        </Popconfirm>
                    </span>
                ),
            },
        ]
        return <div>
            <div>
                <Button onClick={this._handleAdd} type="dashed" icon='plus'>新增</Button>
            </div>
            <div className='content-wrap mt10'>
                <Table
                    columns={columns}
                    dataSource={this.state.list}
                    rowKey='id'
                    rowSelection={null}
                />
            </div>
            <Modal title="表单操作" okText='保存' cancelText='取消'
                visible={this.state.visible}
                onOk={this._handleOK} onCancel={this._handleCancel} >
                <EditForm wrappedComponentRef={(inst) => { this.editForm = inst; }}
                    {...this.state.Editinfo} />
            </Modal>
        </div>
    }
    _handleAdd = () => {
        //点击按钮显示模态框
        this.setState({ visible: true, });
    }
    _handleDelete = (record) => {
        //删除记录操作
    }
    _handleOK = () => {
        //验证表单数据
        this.editForm.props.form.validateFields((err, values) => {
            if (!err) {
                //values 可获取到表单中所有键值数据  将数据进行保存操作
                // 清理表单数据
                this.editForm.props.form.resetFields();
            }
        });
    }
    _handleCancel = () => {
        // 清理表单数据
        this.editForm.props.form.resetFields();
        //隐藏模态框
        this.setState({ visible: false });
    }
    _handleUpdate = (record) => {
        //修改时，赋值表单数据
        let Editinfo = {
            username: record.username,
            code: record.code,
            remark: record.remark,
        }
        this.setState({ visible: true, Editinfo });
    }
}

export default PageDemo;

导入组件

　　import EditFormfrom './EditForm'

组件嵌入

　　<Edit wrappedComponentRef={(inst) => { this.editForm = inst; }}   {...this.state.Editinfo} />

验证组件并获取内容

　　this.editForm.props.form.validateFields((err, values) => {

            if (!err) {

                //values 可获取到表单中所有键值数据  将数据进行保存操作

                // 清理表单数据

                this.editForm.props.form.resetFields();

            }

        });

 

表单组件赋值 

　　{...this.state.Editinfo}