【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;

【Ant Design Pro 四】react 点击事件传参相关推荐

vue 事件调用传参_对vue下点击事件传参和不传参的区别详解
如下所示: {{btn_text1}} {{btn_text2}} var _vm = new Vue({ data : { btn_text1 : '点击1' , btn_text2 : '点击2' ...
click传值vue_对vue下点击事件传参和不传参的区别详解
如下所示: {{btn_text1}} {{btn_text2}} var _vm = new Vue({ data : { btn_text1 : '点击1' , btn_text2 : '点击2' ...
在Ant Design Pro（React）中使用ECharts
使用Ant Design Pro解决方案可以快速搭建前端框架,而ECharts是前端最流行,功能最强大的前端图表库. 下面将讲解下如何在Ant Design Pro使用ECharts. Ant Des ...
小程序中点击事件传参
小程序是事件驱动型的,小程序可以使用点击事件传递参数: 代码如下: // wxml文件 <view class="container"> <view class= ...
微信小程序 - 点击事件传参
首先给某个按钮或者某个组件添加 bindtap点击事件再加上 data-xxx="传值内容" (xxx可以自定义单词) 例如: //xx.wxml <view bindt ...
React Hook中点击事件传参
onTouchStart 事件 <div onTouchStart={()=>Fnstart(index)} key={index} ></div> onClick事件 ...
html点击事件传参 php,HTML通过事件传递参数到js详解及实例
目标处理函数为selectAttr(test) 1.直接传递给定参数如:οnclick="selectAttr('1'); οnclick="selectAttr('a'); 2. ...
微信小程序——点击事件传参没有数据(undefined)
今天在wxml和js传参的时候,为了和后台的命名规则保持一致,在data-questionId的驼峰式命名,结果发现参数传到js的时候,js打印出来为undefined.今天把这个坑填了! 微信开发者 ...
vue 点击事件传参写法
on-click={() => this.handleInfo(warn)}

【Ant Design Pro 四】react 点击事件传参

【Ant Design Pro 四】react 点击事件传参相关推荐

最新文章

热门文章