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

当前页面的代码

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);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162

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>
    );
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38