React + Ant Design 新建和编辑弹窗是同一个组件

父组件 userList

import React from 'react';
import { Button,Input,Select,Table,Tag,Divider,Switch } from 'antd';
import "../systems.less";
const { Search  } = Input;
import UserListCommon from "./UserListCommon"

export default class userList extends React.Component {
    constructor(props) {
        super(props);
        this.getModelOpen= this.getModelOpen.bind(this)
        this.state = {
            order:"-created_at",
            active:1,
            activeData:[
                {
                  value:1,
                  name:'活跃用户'
                },
                {
                    value:2,
                    name:'不活跃用户'
                },
            ],
            visibleChild:false,
            formChild:{},
            titleChild:"",
            data:[
              {
                key: '1',
                name: 'John Brown',
                mailbox: 'yanshi_lab_user@mail.bad.com',
                joinTime: '2020-06-06 20:30:12',
                role: ['1', '2'],
                status:true,
                password:'123456'
              },
              {
                key: '2',
                name: 'Jim Green',
                mailbox: "yanshi_lab_user@mail.bad.com",
                joinTime: '2020-06-06 20:30:12',
                role: ['3'],
                status:false,
                password:'123456'
              },
              {
                key: '3',
                name: 'Joe Black',
                mailbox: "yanshi_lab_user@mail.bad.com",
                joinTime: '2020-06-06 20:30:12',
                role: ['2', '312345'],
                status:true,
                password:'123456'
              },
            ],
            columns:[
              {
                title: '名称',
                dataIndex: 'name',
                key: 'name',
              },
              {
                title: '邮箱',
                dataIndex: 'mailbox',
                key: 'mailbox',
              },
              {
                title: '所属角色',
                key: 'role',
                dataIndex: 'role',
                render: (text, record) => (
                  <span>
                    {
                      text.map(i=>{
                        let color = i.length > 5 ? 'geekblue' : 'green';
                        if(i==1){
                          return (<Tag color={color} key={i}>007</Tag>)
                        }else if(i==2) {
                          return (<Tag color={color} key={i+1}>008</Tag>)
                        }else {
                          return (<Tag color={color} key={i+2}>009</Tag>)
                        }
                      })
                    }
                  </span>
                 
                ),
              },
              {
                  title: '加入时间',
                  dataIndex: 'joinTime',
                  key: 'joinTime',
                },
              {
                  title: '用户状态',
                  dataIndex: 'status',
                  key: 'status',
                  render: (text, record) => {
                      if(text) {
                        return(<Switch  checkedChildren="活跃"  defaultChecked  key={text}/>)

                      }else {
                        return(<Switch   unCheckedChildren="失效"  key={text+1}/>)
                      }
                      
                    
                  },
              },
              {
                title: '操作',
                key: 'action',
                render: (text, record) => (
                  <span>
                    <a onClick={() => this.delEdit(record)}>编辑资料 </a>
                    <Divider type="vertical" />
                    <a>修改密码</a>
                  </span>
                ),
              },
            ]
        }
       
     
    }
    onTypeChange = (value) => {
      this.setState({
            order: value
        })
    
    }
    selectChangeHandler(value) {
       
    }
    getUserList(value) {
      
    }
    delonChange = (value, key) =>{
     
    }
    getUserListCommon = (v) => {
      this.setState({
        visibleChild: v
      });
    }
    // 新建弹窗
    getModelOpen() {
      this.setState({
        visibleChild: true,
        titleChild:'新建'
      });
    }
    //编辑
    delEdit= (v) => {
      this.setState({
        visibleChild: true,
        formChild:JSON.parse(JSON.stringify(v)),
        titleChild:'编辑资料'
      });
   
    }
    render() {
        return(
            <React.Fragment>
                <div className="userListWeb">
                  <div  className="userList">
                    <Button type="primary" onClick={this.getModelOpen}>新建</Button> 
                    <div className ="userListRight">
                        <Select  value ={this.state.active} style={{ width: 200, height: 30, marginLeft: 20 }} onChange={value =>{this.selectChangeHandler(value)}}>
                        {this.state.activeData.map(item => (
                            <Select.Option key={item.value} value={item.value}>
                            {item.name}
                            </Select.Option>
                        ))}
                            
                        </Select>
                        <Select value={this.state.order} style={{ width: 200, height: 30, marginLeft: 20 }} onChange={value => {this.onTypeChange(value)}}>
                            <Select.Option value="-created_at">按降序排列</Select.Option>
                            <Select.Option value="created_at">按升序排列</Select.Option>
                        </Select>
                        <Search
                            placeholder="搜索"
                            onSearch={value => this.getUserList(value)}
                            style={{ width: 200, height: 30, marginLeft: 20 }}
                        />  
                 </div>
                 
                  </div>
                  <Table columns={this.state.columns} dataSource={this.state.data} />
                </div>
                <UserListCommon getCancel={this.getUserListCommon} visibleChild={this.state.visibleChild} formChild ={this.state.formChild} titleChild = {this.state.titleChild}/>
            </React.Fragment>
        )
    }
}

子组件 UserListCommon

import React from 'react';
import { Modal, Button, Form, Input, Checkbox, Row, Col, } from 'antd';
import "./UserListCommon.less";
const CheckboxGroup = Checkbox.Group;
const plainOptions = [
    { label: '007', value: '1' },
    { label: '008', value: '2' },
    { label: '009', value: '3' },
  ];
const defaultCheckedList = ['A', 'B'];
class UserListCommon extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            checkedList: defaultCheckedList,
        }
    }
    /**取消弹窗*/
    handleCancel = () => {
        this.props.getCancel(false)
        this.props.formChild.name = "";
        this.props.formChild.mailbox = "";
        this.props.formChild.password = "";
        this.props.formChild.role = [];
    }
    /**验证规则*/
    handleOk = e => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (!err) {
                console.log('Received values of form: ', values,this.props.form);
            }
        });
    }
    /**角色选择*/
    onChange(checkedValues) {
        console.log('checked = ', checkedValues);
    }
    componentDidMount() {
    }
    render() {
        const { getFieldDecorator } = this.props.form;
        return (
            <React.Fragment>
                <Modal
                    title={this.props.titleChild}
                    visible={this.props.visibleChild}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    footer={[
                        <Button key="back" onClick={this.handleCancel}>
                            取消
                        </Button>,
                        <Button key="submit" type="primary" onClick={this.handleOk}>
                            确定
                        </Button>,
                    ]}
                >
                    <Form labelCol={{ span: 5 }} wrapperCol={{ span: 12 }} onSubmit={this.handleOk} >
                        <Form.Item label="姓名">
                            {getFieldDecorator('name', {initialValue: this.props.formChild.name,
                                rules: [{ required: true, message: '请输入姓名' }],
                            })(<Input />)}
                        </Form.Item>
                        <Form.Item label="邮箱">
                            {getFieldDecorator('mailbox', {initialValue: this.props.formChild.mailbox,
                                rules: [{ required: true, message: '请输入邮箱' }],
                            })(<Input />)}
                        </Form.Item>
                        <Form.Item label="密码">
                            {getFieldDecorator('password', {initialValue: this.props.formChild.password,
                                rules: [{ required: true, message: '请输入密码' }],
                            })(<Input />)}
                        </Form.Item>
                        <Form.Item label="选择角色">
                            {getFieldDecorator('role',{ initialValue: this.props.formChild.role,
                                
                            })(
                                <Checkbox.Group options={plainOptions}  onChange={this.onChange} />
                            )}
                        </Form.Item>
                    </Form>
                </Modal>
            </React.Fragment>
        )
    }
}
const UserList = Form.create({})(UserListCommon);
export default UserList