Antd怎么做onClick on List or Card action？答案

【问题标题】：Antd how to do onClick on List or Card action?Antd怎么做onClick on List or Card action？
【发布时间】：2021-07-16 02:34:49
【问题描述】：

您好，我不知道如何为 Antd Card 的以下操作设置 onclick 功能。有人可以帮我吗？谢谢。

const expand = () =>{
    console.log("expand")
  }

const IconText = ({ icon, text, cb }) => (
    <Space>
      <div onClick={e => cb}>
      {React.createElement(icon)}
      {text}
    </div>
    </Space>
  );


<Card style={{ width: props.width, height: props.height }}

    actions={[
     <IconText icon={ExpandOutlined} text="Expand" key="list-vertical-star-o" cb={()=>expand}/>,
     <IconText icon={MessageOutlined} text="Comments" key="list-vertical-like-o" />,
       ]}
    >

https://ant.design/components/card/

【问题讨论】：

标签： reactjs antd

【解决方案1】：

查看回调 (Working codesandbox)

cb = {
  () => {
    expand("Comments");
  }
}

同时绑定：

&lt;div onClick={e=&gt; cb}&gt;

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Card, Avatar, Space } from "antd";
import {
  EditOutlined,
  EllipsisOutlined,
  SettingOutlined
} from "@ant-design/icons";

const { Meta } = Card;

const IconText = ({ icon, text, cb }) => (
  <Space>
    <div onClick={cb}>
      {/*React.createElement(icon)*/}

      {text}
    </div>
  </Space>
);

const expand = (text) => {
  console.log("expand", text);
};

ReactDOM.render(
  <Card
    style={{ width: 300 }}
    cover={
      <img
        alt="example"
        src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
      />
    }
    actions={[
      <IconText
        text="Expand"
        key="list-vertical-star-o"
        cb={() => {
          expand("Comments");
        }}
      />,
      <IconText text="Comments" key="list-vertical-like-o" />,

      <SettingOutlined key="setting" />,
      <EditOutlined key="edit" />,
      <EllipsisOutlined key="ellipsis" />
    ]}
  >
    <Meta
      avatar={
        <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
      }
      title="Card title"
      description="This is the description"
    />
  </Card>,
  document.getElementById("container")
);

【讨论】：