React-Modal弹出表单组件操作

Posted 2020-12-11 linc2010

React-Modal弹出表单组件操作

1，新建一个表单组件  EditForm.js

 1 import React from ‘react‘;
 2 import { Form, Input, InputNumber } from ‘antd‘;
 3 const { TextArea } = Input
 4 
 5 
 6 class EditForm extends React.Component {
 7     constructor(props) {
 8         super(props);
 9     }
10     componentWillMount(){
11     }
12     componentWillReceiveProps(nextProps){
13     }
14     componentDidMount() {
15       
16     }
17     render() {
18         const { getFieldDecorator } = this.props.form;
19         return <Form labelCol={{ span: 6 }} wrapperCol={{ span: 12 }}>
20             <Form.Item label="账户" >
21                 {getFieldDecorator(‘username‘, {
22                     rules: [
23                         {
24                             required: true,
25                             message: ‘账户‘,
26                         },
27                     ],
28                     initialValue: this.props.username
29                 })(<Input />)}
30             </Form.Item>
31             <Form.Item label="代码">
32                 {getFieldDecorator(‘code‘, {
33                     rules: [
34                         {
35                             required: true,
36                             message: ‘代码‘,
37                         },
38                     ],
39                     initialValue: this.props.code
40                 })(<Input  />)}
41             </Form.Item>
42          
43             <Form.Item label="备注">
44             {getFieldDecorator(‘remark‘, {
45                 rules: [
46                     {
47                         message: ‘备注‘,
48                     },
49                 ],
50                 initialValue: this.props.remark
51             })(
52                 <TextArea row={6} />,
53             )}
54         </Form.Item>
55         </Form>
56 
57     }
58 
59 }
60 export default Form.create({})(EditForm);

View Code

 

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

  1 import React from ‘react‘;
  2 import { Modal, Table, Popconfirm, Divider, Button } from ‘antd‘;
  3 import EditForm from ‘./EditForm‘
  4 
  5 
  6 class PageDemo extends React.Component {
  7     state = {
  8         visible: false,
  9         list: [],
 10         invinfo: {
 11             username: ‘‘,
 12             code: ‘‘,
 13             remark: ‘‘,
 14         }
 15     }
 16     componentDidMount() {
 17         //获取表格list数据
 18     }
 19 
 20     render() {
 21         const columns = [
 22 
 23             {
 24                 title: ‘账户‘,
 25                 dataIndex: ‘username‘
 26             },
 27             {
 28                 title: ‘代码‘,
 29                 dataIndex: ‘code‘
 30             },
 31             {
 32                 title: ‘备注‘,
 33                 dataIndex: ‘remark‘
 34             },
 35             {
 36                 title: ‘操作‘,
 37                 key: ‘action‘,
 38                 render: (text, record) => (
 39                     <span>
 40                         <a className=‘a_edit‘ onClick={() => this._handleUpdate(record)}>修改</a>
 41                         <Divider type="vertical" />
 42                         <Popconfirm title="确认删除?" okText=‘删除‘ cancelText=‘取消‘ onConfirm={() => this._handleDelete(record)}>
 43                             <a style={{ color: ‘red‘ }}>删除</a>
 44                         </Popconfirm>
 45                     </span>
 46                 ),
 47             },
 48         ]
 49         return <div>
 50             <div>
 51                 <Button onClick={this._handleAdd} type="dashed" icon=‘plus‘>新增</Button>
 52             </div>
 53             <div className=‘content-wrap mt10‘>
 54                 <Table
 55                     columns={columns}
 56                     dataSource={this.state.list}
 57                     rowKey=‘id‘
 58                     rowSelection={null}
 59                 />
 60             </div>
 61             <Modal title="表单操作" okText=‘保存‘ cancelText=‘取消‘
 62                 visible={this.state.visible}
 63                 onOk={this._handleOK} onCancel={this._handleCancel} >
 64                 <EditForm wrappedComponentRef={(inst) => { this.editForm = inst; }}
 65                     {...this.state.Editinfo} />
 66             </Modal>
 67         </div>
 68     }
 69     _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     }
101 }
102 
103 export default PageDemo;

View Code

 

导入组件

　　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}