在react-antd中弹出层form内容传递给父组件的操作

编程学习 2021-07-04 14:06www.dzhlxh.cn编程入门
这篇文章主要介绍了在react-antd中弹出层form内容传递给父组件的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随长沙网络推广过来看看吧

我就废话不多说了,大家还是直接看代码吧~

子组件:

// jshint esversion:6
import React, { Component } from 'react';
import { Form, Input} from 'antd';

const FormItem = Form.Item;

class Forms extends Component{
 getItemsValue = ()=>{ //3、自定义方法,用来传递数据(需要在父组件中调用获取数据)
  const values= this.props.form.getFieldsValue();  //4、getFieldsValue:获取一组输入控件的值,如不传入参数,则获取全部组件的值
  return values;
 }
 render(){
  const { form } = this.props;
  const { getFieldDecorator } = form; //1、将getFieldDecorator 解构出来,用于和表单进行双向绑定
  return(
   <Form layout="vertical">
    <FormItem label="姓名">
     {getFieldDecorator('name')( //2、getFieldDecorator 的使用方法,这种写法真的很蛋疼
      <Input />
     )}
    </FormItem>
    <FormItem label="年龄">
     {getFieldDecorator('age')(
      <Input />
     )}
    </FormItem>
    <FormItem label="城市">
     {getFieldDecorator('address')(
      <Input />
     )}
    </FormItem>
   </Form>
  )
 }
}

export default Form.create()(Forms); //创建form实例

父组件:

import React, { Component } from 'react';
import { Modal } from 'antd';
import Forms from './Forms'

export default class Modals extends Component {
 handleCancel = () => {
  this.props.closeModal(false);
 }
 handleCreate = () => {
  console.log(this.formRef.getItemsValue());  //6、调用子组件的自定义方法getItemsValue。注意:通过 this.formRef 才能拿到数据
  this.props.getFormRef(this.formRef.getItemsValue());
  this.props.closeModal(false);
 }
 render() {
  const { visible } = this.props;
  return (
   <Modal
    visible={visible}
    title="新增"
    okText="保存"
    onCancel={this.handleCancel}
    onOk={this.handleCreate}
   >
    <Forms
     wrappedComponentRef={(form) => this.formRef = form}  //5、使用wrappedComponentRef 拿到子组件传递过来的ref(官方写法)
    />
   </Modal>
  );
 }
}

补充知识:react+antd组件 modal里面包裹使用form表单并获取提交事件

1 先上图

我这里是点击“修改密码”那个按钮,然后跳到了modal框。(大家这里可以随便写一个按钮,然后给他一个点击事件让他可以显示modal框就好了,我这里着重讲解标题的内容)

2 贴代码

const [visible, setVisible] = useState(false);//antd 控制modal是否显示
const showMoal=()=>{
 // console.log("showMoal")
 setVisible(true);
}
const handleCancel = e => {
// console.log("cancel:",e);
setVisible(false);
};

function updatePasswordChange(){
 // console.log("0000");
 setVisible(false);
}

//Modal框
 <Modal
  title="密码修改"
  visible={visible}
  onCancel={handleCancel}
  footer={null}
 >
  
  <UpdatePassword updatePasswordChange={updatePasswordChange}></UpdatePassword>
</Modal>


//Form表单的提交事件
const onFinish = values => {
  // console.log('Success:', values); 
  IsUpdatePassword.commit(session.environment,values.newpassword,values.oldpassword,(response, errors) => {
    if (errors) {
     message.error(errors[0].message);
    } else {
     //修改密码成功
     message.success('修改密码成功!');
     props.updatePasswordChange();
    }
   },
   (errors) => {
    message.error(errors.source.errors[0].message);
   })
  
};

//Form表单部分
return(
  <>
   <Form
    {...layout}
    name="密码修改"
    initialValues={{
     remember: true,
    }}
    onFinish={onFinish}
    onFinishFailed={onFinishFailed}
   >
    <Form.Item
     label="旧密码"
     name="oldpassword"
     rules={[
     {
      required: true,
      message: '请输入旧密码!',
     },
     ]}
    >
     <Input.Password />
    </Form.Item>

    <Form.Item
     label="新密码"
     name="newpassword"
     rules={[
     {
      required: true,
      message: '请输入新密码!',
     },
     ]}
     hasFeedback
    >
     <Input.Password />
    </Form.Item>

    <Form.Item
     name="confirm"
     label="确认新密码"
     dependencies={['newpassword']}
     hasFeedback
     rules={[
     {
      required: true,
      message: '请确认新密码!',
     },
     ({ getFieldValue }) => ({
      validator(rule, value) {
      if (!value || getFieldValue('newpassword') === value) {
       return Promise.resolve();
      }
      return Promise.reject('两次新密码不一致!');
      },
     }),
     ]}
    >
     <Input.Password />
    </Form.Item>


    {/* <Form.Item {...tailLayout} name="remember" valuePropName="checked">
     <Checkbox>Remember me</Checkbox>
    </Form.Item> * 

Copyright © 2016-2025 www.dzhlxh.cn 金源码 版权所有 Power by

网站模板下载|网络推广|微博营销|seo优化|视频营销|网络营销|微信营销|网站建设|织梦模板|小程序模板