在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 相关文章推荐
动态修改DOM 里面的 id 属性的弊端分析
Sep 03 Javascript
js 通用javascript函数库整理
Aug 14 Javascript
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
Oct 11 Javascript
JavaScript编写页面半透明遮罩效果的简单示例
May 09 Javascript
JS实用技巧小结(屏蔽错误、div滚动条设置、背景图片位置等)
Jun 16 Javascript
Bootstrap Table服务器分页与在线编辑应用总结
Aug 08 Javascript
BootStrap入门教程(二)之固定的内置样式
Sep 19 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
Nov 18 Javascript
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
详细讲解vue2+vuex+axios
May 27 Javascript
vue实现简单loading进度条
Jun 06 Javascript
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 jQuery
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
phpmyadmin 3.4 空密码登录的实现方法
2010/05/29 PHP
解析:通过php socket并借助telnet实现简单的聊天程序
2013/06/18 PHP
php二维数组排序方法(array_multisort usort)
2013/12/25 PHP
CI框架简单邮件发送类实例
2016/05/18 PHP
自动检查并替换文本框内的字符
2006/06/30 Javascript
addRule在firefox下的兼容写法
2006/11/30 Javascript
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
2010/05/18 Javascript
jquery(live)中File input的change方法只起一次作用的解决办法
2011/10/21 Javascript
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
2012/10/11 Javascript
Jquery中使用setInterval和setTimeout的方法
2013/04/08 Javascript
javascript获取隐藏dom的宽高 具体实现
2013/07/14 Javascript
Bootstrap树形组件jqTree的简单封装
2016/01/25 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
2016/05/12 Javascript
js将滚动条滚动到指定位置的简单实现方法
2016/06/25 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
2016/11/21 Javascript
jquery replace方法去空格
2017/05/08 jQuery
JS二级菜单不同实现方法分析【4种方法】
2018/12/21 Javascript
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
2019/06/18 jQuery
vue-cli和v-charts实现可视化图表过程解析
2019/10/08 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
2020/08/19 Javascript
[01:34]完美“圣”典宣传片震撼发布,12.17与你不见不散
2016/12/16 DOTA
python生成指定长度的随机数密码
2014/01/23 Python
详解Python的Twisted框架中reactor事件管理器的用法
2016/05/25 Python
Python基于回溯法子集树模板解决马踏棋盘问题示例
2017/09/11 Python
基于Python列表解析(列表推导式)
2018/06/23 Python
python 递归深度优先搜索与广度优先搜索算法模拟实现
2018/10/22 Python
对Python中小整数对象池和大整数对象池的使用详解
2019/07/09 Python
python3 sorted 如何实现自定义排序标准
2020/03/12 Python
全球最大的网上自行车商店:Chain Reaction Cycles
2016/12/02 全球购物
真正的英国宝藏:Mappin & Webb
2019/05/05 全球购物
新电JAVA笔试题目
2014/08/31 面试题
土木工程师职业规划范文
2014/03/07 职场文书
档案管理员岗位职责
2015/02/12 职场文书
婚庆开业庆典主持词
2015/06/30 职场文书
中学教代会开幕词
2016/03/04 职场文书
使用jpa之动态插入与修改(重写save)
2021/11/23 Java/Android