【Ant Design Pro 四】react 点击事件传参
简单的绑定点击事件传参：
点击事件
function myClick(){console.log('点击')}return (<Button onClick={myClick}>点击</Button>)点击事件传参
sendGoods(e){console.log('sendGoods',e)}render() {retrun(<Button type="primary" onClick={(event) =>this.sendGoods('a')}>发货</Button>)}
下面看一个示例demo的完整代码：
代码解析： 可以选择性的看 editCard 事件的传参，尝试过几种传参的方式，会有莫名其妙的bug，这种方式可行。
import { Card, Icon, Button } from 'antd';
import React, { Component } from 'react';
import { connect } from 'dva';
import router from 'umi/router';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import styles from './tab_1.less';const { Meta } = Card;
@connect(({ loadding, d_models }) => ({d_models
}))
class a extends Component {dispatch = this.props.dispatch;state = {page: 'tab_1'};// 页面初次渲染componentDidMount() {this.messageSettingList();};//点击事件，传参editCard = (e) => {console.log('eeeeeeee1e', e)// console.log('eeeeeeee2222e',e.target.id)};messageSettingList(page_no = '', page_size = '') {this.dispatch({type: 'd_models/messageSettingList',payload: {materialType: 1,page_no,page_size,},callback: (res) => {if (res.code == 1) {this.setState({list: res.list})}}})};render() {// 列表组件var CardList = (props) => {const list = props.list;const listItems = list.map((item, idx) =><Cardkey={idx}className={styles.top_20}style={{ width: 200, display: 'inline-block', margin: 30 }}cover={<imgalt="example"src={item.materialImageUrl}/>}actions={[<Icon type="delete" key="delete" />,<Icon type="edit" onClick={() => {return this.editCard(item);}} key="edit" />,]}><Metatitle={item.materialContent}description={item.materialTitle}/></Card>);return (<span>{listItems}</span>);}return (<PageHeaderWrapper><div className={styles.body}><Button type="primary" onClick={() => {router.push('/d_msgstting/addCard');}}>点击按钮跳转页面</Button><div className={styles.p_r}>{this.state.list ? (<CardList list={this.state.list} />) : null}</div></div></PageHeaderWrapper>);}
}export default a;
相关文章：
初创公司为什么要我_在一家大型初创公司担任副总裁之前，我希望知道什么
初创公司为什么要我by Assaf Elovic通过阿萨夫埃洛维奇 在一家大型初创公司担任副总裁之前，我希望知道什么 (What I wish I knew before becoming a VP at a large startup) When I started my position as VP of R&D at a growing startup, I thought my bigg…
微信小程序自定义轮播图滚动样式 自定义组件轮播图的实现
效果图： 实现代码： wxml <view class"card card_b"><swiper autoplay"{{true}}" interval"4000" duration"500" current"{{swiperCurrent}}" bindchange"swiperChange" class&qu…
好看的dialog,sweet Alert Dialog 导入Android Studio
系统自带的dialog实在是丑到无法忍受。所以找到了一款比較好的第三方dialog。 github 地址例如以下: https://github.com/pedant/sweet-alert-dialog 老规矩，还是先看效果图！ 以下来介绍导入Android studio的方法 首先将github上的项目clone到本地。然后…
linux系统中删除文件夹
rm -rf 文件夹的名称 rm-r 文件名称转载于:https://www.cnblogs.com/chucklu/p/4890523.html
unity开发入门_Unity游戏开发终极入门指南
unity开发入门Unity is a great tool for prototyping everything from games, to interactive visualisations. In this article, we run through all you need to know to get started using Unity.Unity是一个很好的工具，可用于制作从游戏到交互式可视化等所有内…
uvalive 3218 Find the Border
题意：一条封闭折线将平面分成了若干个区域，按顺序给出折线各点的坐标，要求输出封闭折线的轮廓。 题解：用类似卷包裹的算法，先确定一个一定会被选中的点(x坐标最小，y坐标最小)作为起点，然后把可…
[Mac] mac linux 多线程下载利器 axel
> 之前做过一些文件下载的统计，发现谷歌浏览器chrome和火狐firefox, 一般都是单线程的下载文件，360浏览器却是多线程的下载。如今切换到了mac上，发现没有360哪个浏览器，就像找个在linux或者mac下能够多线程下载的工具。 linu…
antd 表单提交，文件和表单内容一起提交，表单校验
用很简单的源码实现包含下列 antd 表单相关知识： 1.表单必填校验，规则校验 2.Upload 上传图片，获取上传图片的状态，如上传成功，上传失败，上传进度条，删除上传的文件 3.获取 Input 组件用户输入的值，设置默认值 4.提交表单不刷新页面 5.把上传的图片显示在页面 页面…
代码注释//_您应该停止编写//的五个代码注释，并且//应该开始的一个注释
代码注释//提供来自您最喜欢和最受欢迎的开源项目的示例-React，Angular，PHP，Pandas等！ (With examples from your favorite and most popular open source projects — React, Angular, PHP, Pandas and more!) 代码质量与注释之间…
eclipse安装maven
maven 下载地址：http://maven.apache.org/download.cgi 1.maven环境配置 将下载的maven解压到某一盘下，进入E:\maven\apache-maven-3.3.9\conf目录，修改setting.xml文件 找到<localRepository>节点，配置本地仓库的地址&…
微信小程序 循迹功能制作
规划地图的路径，实时获取用户当前的定位，进行路线循迹导航功能的开发： 效果图： 实现代码： <map id"map" enable-satellite longitude"{{longitude1}}" latitude"{{latitude1}}" sca…
DOM解析和SAX解析的区别
DOM解析和SAX解析的区别 博客分类： XMLDOM SAX DOM解析和SAX解析的区别 No区 别DOM解析SAX解析1操作将所有文件读取到内存中形成DOM树，如果文件量过大，则无法使用顺序读入所需要的文件内容，不会一次性全部读取，不受文件…
java编写代码用什么_如何学习用Java编写代码：为什么要学习以及从哪里开始
java编写代码用什么by John Selawsky约翰塞劳斯基(John Selawsky) 如何学习用Java编写代码：为什么要学习以及从哪里开始 (How to learn to code in Java: why you should and where to start) Define your career goals and choose a language. This is the most i…
迷宫寻宝（搜索）
迷宫寻宝（一） 时间限制：1000 ms | 内存限制：65535 KB难度：4描述一个叫ACM的寻宝者找到了一个藏宝图，它根据藏宝图找到了一个迷宫，这是一个很特别的迷宫，迷宫里有N个编过号的门&…
理解Python的迭代器(转)
原文地址: http://python.jobbole.com/81916/ 另外一篇文章: http://www.cnblogs.com/kaituorensheng/p/3826911.html 什么是迭代 可以直接作用于for循环的对象统称为可迭代对象(Iterable)。 可以被next()函数调用并不断返回下一个值的对象称为迭代器(Iterator)。 所有的Iterab…
快捷导航动画制作
做了一个仿大众点评的快捷导航动画效果，点击导航内的箭头，导航缩放，点击快捷导航再伸展。 看效果图： 实现代码： <block wx:if"{{!isCustom}}"><view class"home_and_reSource" animati…
instant apps_Android Instant Apps 101：它们是什么以及它们如何工作
instant appsby Tomislav Smrečki通过TomislavSmrečki Android Instant Apps are a cool new way to consume native apps without prior installation. Only parts of the app are downloaded and launched, giving the users a native look and feel in a couple of secon…
数据库分享一： MySQL的Innodb缓存相关优化
无论是对于哪一种数据库来说，缓存技术都是提高数据库性能的关键技术，物理磁盘的访问速度永 远都会与内存的访问速度永远都不是一个数量级的。通过缓存技术无论是在读还是写方面都可以大大提 高数据库整体性能。Innodb_buffer_pool_size 的合理设置Innodb…
用过美德乐吸奶器的宝妈们感觉比国产吸奶器怎么样啊？
药效好不好，看疗效就知道。吸奶器好不好看评价就知道。我们来看看美德乐吸奶器 天猫旗舰店 : http://medela.wang 的宝妈们的评价如可 拔奶神器，绝对好过贝亲！最初一次七八十，后来一百多，现在可以翻个倍。结合宝宝吮吸…
小程序地图多个 circles 使用demo
效果图： 代码： var that; const app getApp() const util require("../../utils/util.js") const data require("../../utils/map.js") Page({data: {pageShow: false,scale: 15,obj: {},longitude: 116.34665554470486,latitud…
编写文档_如何通过编写优质文档来使自己的未来快乐
编写文档by Gabriele Cimato加布里埃莱西马托(Gabriele Cimato) 如何通过编写优质文档来使自己的未来快乐 (How to make your future self happy by writing good docs) 或者，在清除旧代码库时如何减少痛苦 (Or how to be less miserable when dusting off an old …
（转载）人人都会OSGI--实例讲解OSGI开发
http://longdick.iteye.com/blog/457310转载于:https://www.cnblogs.com/eecs2016/articles/7422310.html
小程序json字符串转 json对象 { name :你好} 转成 { name :你好}
解决后端接口返回 var obj "{ name :"你好"}" 类似这样的数据，对象或者数组外面包了一层引号， 把这种数据转成 var obj { name :"你好"}； 直接上代码： // pages/test/test.js Page({jsonStrToJ…
每天写的叫工作日志，每周写的总结叫周报，每月写的叫月报
有些时候，老板会突发让您求每天都要写工作周报，什么项目什么任务，完成情况，完成花费的时间等，然后汇总部门周报；也不是写不出，只是不知道有时候重复做一个项目，到底每天有什么好写&a…
为什么分散刷新没有死时间_分散项目为何失败（以及如何处理）
为什么分散刷新没有死时间The most exciting thing about working in the decentralized economy is the fact that no one has any idea as to where it’ll all end up!在去中心decentralized economy工作最令人振奋的事情是，没有人知道最终的结果！ T…
.NET Core 常用加密和Hash工具NETCore.Encrypt
前言 在日常开发过程中，不可避免的涉及到数据加密解密（Hash）操作，所以就有想法开发通用工具，NETCore.Encrypt就诞生了。目前NETCore.Encrypt只支持.NET Core ,工具包含了AES,DES,RSA加密解密，MD5࿰…
url 通配符解析成参数
需求：url 参数是通配符，需要把通配符解析成参数并且拼接到 url 中 例如：https://xxx.cn/index.html$a1$b2; 解析成 https://xxx.cn/index.html?a1&b2; 时间关系，直接上代码，有时间再补上注释 下面是小程序页…
性能测试分享：系统架构
性能测试分享：系统架构 转载于:https://www.cnblogs.com/poptest/p/4904584.html
graphql是什么_为什么GraphQL是避免技术债务的关键
graphql是什么GraphQL (not to be confused with GraphDB or Open Graph or even an actual graph) is a remarkably creative solution to a relatively common problem: How do you enable front end developers to access backend data in exactly the way they need it?Gr…
JS如何判断json是否为空
1、判断json是否为空 jQuery.isEmptyObject()； 2、遍历json function getHsonLength(json{var jsonLength0;for (var i in json){jsonLength;}return jsonLength;}转载于:https://www.cnblogs.com/donaldworld/p/7423811.html