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


Posted in Javascript onOctober 24, 2020

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

子组件:

// 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 先上图

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

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

我这里是点击“修改密码”那个按钮,然后跳到了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> */}

    <Form.Item {...tailLayout}>
     <Row>
      <Col span={12}>
       <Button type="primary" htmlType="submit">
       确认
       </Button>
      </Col>
      <Col span={12}>
       <Button onClick={props.updatePasswordChange}>
       取消
       </Button>
      </Col>
     </Row>
    </Form.Item>
   </Form>
  </>
 );
}

小结:

上面的代码你看起来可能有点乱,而且也运行不起来,那是肯定的!因为我只粘贴了整个项目的一部分。

下面我来点睛:modal里面使用form表单并获取提交事件主要是使用了modal的**footer={null}**这个特性把外面的“确认取消按键隐藏”,然后使用我们自己的Form的“确定取消”按键,然后再通过Form的onFinish 事件来提交值和控制modal框的显示与消失。

就ok了!

以上这篇在react-antd中弹出层form内容传递给父组件的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE和Mozilla的兼容性汇总event
Aug 12 Javascript
JS实现遮罩层效果的简单实例
Nov 12 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
Nov 20 Javascript
解决jQuery使用JSONP时产生的错误
Dec 02 Javascript
JQuery导航菜单选择特效
Apr 11 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
Jun 30 Javascript
微信小程序实现图片上传功能
May 28 Javascript
vue-cli webpack配置文件分析
May 20 Javascript
Vue.set 全局操作简单示例
Sep 19 Javascript
javascript的delete运算符知识点总结
Nov 19 Javascript
微信小程序中的上拉、下拉菜单功能
Mar 13 Javascript
vue中使用vue-pdf的方法详解
Sep 05 Javascript
Antd下拉选择,自动匹配功能的实现
Oct 24 #Javascript
在react项目中使用antd的form组件,动态设置input框的值
Oct 24 #Javascript
Vue-Ant Design Vue-普通及自定义校验实例
Oct 24 #Javascript
解决vue打包报错Unexpected token: punc的问题
Oct 24 #Javascript
解决vue项目axios每次请求session不一致的问题
Oct 24 #Javascript
解决vue中使用less/sass及使用中遇到无效的问题
Oct 24 #Javascript
vue中是怎样监听数组变化的
Oct 24 #Javascript
You might like
长波有什么东西
2021/03/01 无线电
PHP 断点续传实例详解
2017/11/11 PHP
PHP面向对象五大原则之开放-封闭原则(OCP)详解
2018/04/04 PHP
csdn 博客中实现运行代码功能实现
2009/08/29 Javascript
基于Jquery插件开发之图片放大镜效果(仿淘宝)
2011/11/19 Javascript
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
2013/04/27 Javascript
后台获取ZTREE选中节点的方法
2015/02/12 Javascript
jQuery实现表格展开与折叠的方法
2015/05/04 Javascript
javascript实现的简单的表单验证
2015/07/10 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
2015/12/04 Javascript
jquery实现鼠标悬浮停止轮播特效
2020/08/20 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
2016/06/28 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
2016/09/28 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
2016/10/10 Javascript
easyui messager alert 三秒后自动关闭提示的实例
2016/11/07 Javascript
vue 2.0路由之路由嵌套示例详解
2017/05/08 Javascript
JS奇技之利用scroll来监听resize详解
2017/06/15 Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
2018/01/31 Javascript
关于React动态加载路由处理的相关问题
2019/01/07 Javascript
教你如何在Django 1.6中正确使用 Signal
2014/06/22 Python
详解Tensorflow数据读取有三种方式(next_batch)
2018/02/01 Python
Python常见数字运算操作实例小结
2019/03/22 Python
使用TensorFlow直接获取处理MNIST数据方式
2020/02/10 Python
Python基于pyjnius库实现访问java类
2020/07/31 Python
科沃斯机器人官网商城:Ecovacs
2016/08/29 全球购物
俄罗斯的精英皮具:Wittchen
2018/01/29 全球购物
Clarks鞋法国官方网站:英国其乐鞋品牌
2018/02/11 全球购物
英国儿童设计师服装的领先零售商:Base
2019/03/17 全球购物
ORACLE第二个十问
2013/12/14 面试题
初中生学习的自我评价
2013/11/14 职场文书
大学生思想汇报范文
2013/12/31 职场文书
2014年酒店前台工作总结
2014/11/14 职场文书
收银员岗位职责范本
2015/04/07 职场文书
2015年档案管理工作总结
2015/04/08 职场文书
防震减灾主题班会
2015/08/14 职场文书
MySQL 语句执行顺序举例解析
2022/06/05 MySQL