ant design（4.0）中点击新增，跳出一个from表单提交

当前页面的代码

import React, { Component } from 'react';
import { Card, Button, Row, Col, Table, Avatar, Popconfirm, message, Modal } from 'antd';
// import { connect } from 'dva' umi 2.*多的版本
import { connect } from 'umi'; //connect,props可以结构出来dispatch
import ModalFrom from './components/ModalFrom';
class kindList extends Component {
  constructor(props) {
    super(props);
    const { dispatch, list } = this.props;
    this.columns = [
      {
        key: 'img',
        title: '分类图片',
        dataIndex: 'img',
        render: (text, record) => <Avatar src={text} />,
      },
      {
        key: 'ctitle',
        title: '类别中文名',
        dataIndex: 'ctitle',
      },
      {
        key: 'etitle',
        title: '类别英语名',
        dataIndex: 'etitle',
      },
      {
        key: 'etitidle',
        title: 'ID',
        dataIndex: 'id',
      },
      {
        key: 'addTime',
        title: '增加时间',
        dataIndex: 'addTime',
      },
      {
        key: 'operation',
        title: '操作',
        dataIndex: 'operation',
        render: (text, record) => {
          return (
            <div>
              <Button size="small" style={{ marginRight: '10px' }}>
                编辑
              </Button>
              <Popconfirm
                key={record.id}
                title="是否确定删除此行数据?"
                onConfirm={() => this.goDel(record.id)}
              >
                <Button size="small" danger>
                  删除
                </Button>
              </Popconfirm>
            </div>
          );
        },
      },
    ];
    this.state = {
      data: [],
      pagination: {
        current: 1,
        pageSize: 10,
      },
      loading: false,
      visible: false,
      rowDate: {},
    };
  }
  layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
  };
  // 分类列表
  fetch(data) {
    const { dispatch } = this.props;
    dispatch({
      type: 'kind/initKindList',
      payload: { ...data },
    });
  }
  // 删除
  goDel = (value) => {
    console.log(value);
    const { dispatch } = this.props;
    dispatch({
      type: 'kind/delete',
      payload: { id: value },
      callback: () => {
        this.fetch();
        message.success('删除成功');
      },
    });
  };
  // 新增
  goAdd = (v) => {
    this.setState({
      visible: true,
    });
  };
  // 弹窗提交事件
  modalSubmit = (value) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'kind/fromSubmit',
      payload: value,
      callback: () => {
        this.fetch();
      },
    });
    this.setState({
      visible:false
    })
  };
  // 弹窗取消按钮
  handleCancel = (e) => {
    console.log(e);
    this.setState({
      visible: false,
    });
  };
  // 渲染数据
  componentDidMount() {
    this.fetch();
  }

  render() {
    const { pagination } = this.state;
    const {
      kind: { kindList },
      loading,
    } = this.props;
    return (
      <div>
        <Card bordered>
          <Button type="primary" size="small" onClick={() => this.goAdd(false)}>
            新增
          </Button>
          <Table
            size="small"
            columns={this.columns}
            rowKey={(record, i) => i}
            dataSource={kindList}
            pagination={pagination}
            loading={loading}
            // onChange={this.handleTableChange}
          />
        </Card>
        <Modal title="详情" visible={this.state.visible} footer={null}>
          <ModalFrom ref="getFromValue" modalSubmit={this.modalSubmit}></ModalFrom>
        </Modal>
      </div>
    );
  }
}
export default connect(({ kind, loading }) => ({
  kind,
  loading: loading.effects['kind/initKindList'],
}))(kindList);

Modal 里面组件ModalFrom 的代码

import React, { Component } from 'react';
import { Form, Input, Button } from 'antd';
export default class ModalFrom extends Component {
  render() {
    // 提交事件
    const onFinish = values => {
        const {modalSubmit}=this.props;
        modalSubmit(values)
    }
    return (
      <div>
        <Form onFinish={onFinish}>
          <Form.Item
            name="ctitle"
            label="中文名"
            rules={[{ required: true, message: '请输入品牌的中文名' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="etitle"
            label="英语名"
            rules={[{ required: true, message: '请输入品牌的英语名' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit">
              提交
            </Button>
            <Button htmlType="button">取消</Button>
          </Form.Item>
        </Form>
      </div>
    );
  }
}