React-Modal弹出表单组件操作
Posted linc2010
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React-Modal弹出表单组件操作相关的知识,希望对你有一定的参考价值。
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);
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;
导入组件
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}
以上是关于React-Modal弹出表单组件操作的主要内容,如果未能解决你的问题,请参考以下文章