在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 相关文章推荐
js 数值项目的格式化函数代码
May 14 Javascript
网站基于flash实现的Banner图切换效果代码
Oct 14 Javascript
分享几种比较简单实用的JavaScript tabel切换
Dec 31 Javascript
jQuery动态生成Bootstrap表格
Nov 01 Javascript
深入理解vue.js双向绑定的实现原理
Dec 05 Javascript
Angular2使用Angular-CLI快速搭建工程(二)
May 21 Javascript
JS实现简单的浮动碰撞效果示例
Dec 28 Javascript
JS实现的文件拖拽上传功能示例
May 21 Javascript
使用 Node.js 实现图片的动态裁切及算法实例代码详解
Sep 29 Javascript
vue resource发送请求的几种方式
Sep 30 Javascript
Vue通过配置WebSocket并实现群聊功能
Dec 31 Javascript
element-ui 实现响应式导航栏的示例代码
May 08 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
php使用ffmpeg向视频中添加文字字幕的实现方法
2016/05/23 PHP
对象的类型:本地对象(1)
2006/12/29 Javascript
Three.js源码阅读笔记(Object3D类)
2012/12/27 Javascript
js使用html()或text()方法获取设置p标签的显示的值
2014/08/01 Javascript
js实现图片在未加载完成前显示加载中字样
2014/09/03 Javascript
node.js中使用socket.io的方法
2014/12/15 Javascript
js实现网页抽奖实例
2015/08/05 Javascript
jquery小火箭返回顶部代码分享
2015/08/19 Javascript
jquery实现通用的内容渐显Tab选项卡效果
2015/09/07 Javascript
使用bootstrap插件实现模态框效果
2017/05/10 Javascript
vue.js声明式渲染和条件与循环基础知识
2017/07/31 Javascript
vue实现a标签点击高亮方法
2018/03/17 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
2018/09/27 Javascript
axios解决高并发的方法:axios.all()与axios.spread()的操作
2020/11/09 Javascript
[20:46]Ti4循环赛第三日VG vs DK
2014/07/12 DOTA
[47:35]VP vs Pain 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
python使用电子邮件模块smtplib的方法
2016/08/28 Python
python3中set(集合)的语法总结分享
2017/03/24 Python
深入探究Django中的Session与Cookie
2017/07/30 Python
Python实现的归并排序算法示例
2017/11/21 Python
python实现dijkstra最短路由算法
2019/01/17 Python
PyTorch搭建一维线性回归模型(二)
2019/05/22 Python
详解Python odoo中嵌入html简单的分页功能
2019/05/29 Python
Python爬虫实现使用beautifulSoup4爬取名言网功能案例
2019/09/15 Python
python 字符串的驻留机制及优缺点
2020/06/19 Python
CSS3感应鼠标的背景闪烁和图片缩放动画效果
2014/05/14 HTML / CSS
CSS3实现伪类hover离开时平滑过渡效果示例
2017/08/10 HTML / CSS
美国汽车性能部件和赛车零件网站:Vivid Racing
2018/03/27 全球购物
倩碧英国官网:Clinique英国
2018/08/10 全球购物
泰国排名第一的家居用品中心:HomePro
2020/11/18 全球购物
《李时珍夜宿古寺》教学反思
2014/04/09 职场文书
银行授权委托书格式
2014/10/10 职场文书
2014年村计划生育工作总结
2014/11/14 职场文书
申报材料格式
2014/12/30 职场文书
2015年度服装销售工作总结
2015/03/31 职场文书
R9700摩机记
2022/04/05 无线电