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

最新推荐文章于 2024-07-21 18:07:43 发布

a_靖

最新推荐文章于 2024-07-21 18:07:43 发布

阅读量4.2k

点赞数

分类专栏： react Web前端 Ant Design Pro 教程专栏文章标签： react 事件传参

本文链接：https://blog.csdn.net/qq_35713752/article/details/103505111

版权

Ant Design Pro 教程专栏同时被 3 个专栏收录

40 篇文章 152 订阅 ¥49.90 ¥99.00

订阅专栏

Web前端

404 篇文章 25 订阅

订阅专栏

react

48 篇文章 5 订阅

订阅专栏

本文介绍了在Ant Design Pro中使用React进行点击事件参数传递的方法，通过一个示例代码详细解析了如何在`editCard`事件中正确且无bug地传递参数。

摘要由CSDN通过智能技术生成

简单的绑定点击事件传参：

点击事件


        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) =>
        <Card
          key={idx}
          className={styles.top_20}
          style={{ width: 200, display: 'inline-block', margin: 30 }}
          cover={
            <img
              alt="example"
              src={item.materialImageUrl}
            />
          }
          actions={[
            <Icon type="delete" key="delete" />,
            <Icon type="edit" onClick={() => {
              return this.editCard(item);
            }} key="edit" />,
          ]}
        >
          <Meta
            title={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;