单击卡片时如何调用函数 - MERN Stack答案

【问题标题】：How to call a function when a Card is Clicked - MERN Stack单击卡片时如何调用函数 - MERN Stack
【发布时间】：2021-10-05 03:05:40
【问题描述】：

我想在用户点击卡片时调用一个函数（我使用了 react-bootstrap 中的卡片）。我尝试了一个 onclick 功能，但它不起作用。

clientCard.js

import React from "react";
import Card from 'react-bootstrap/Card'
import DeleteOutlineIcon from '@material-ui/icons/DeleteOutline';
import EditOutlinedIcon from '@material-ui/icons/EditOutlined';

const clientCard = ({client}) => (

    <Card className="text-center card-mine" >
        <Card.Header>{client.clientFirstName} {client.clientLastName}</Card.Header>
        <Card.Body >
            <Card.Text >
            {client.clientContactNumber}
            <br></br>
            {client.clientEmail}
            </Card.Text>
        </Card.Body>
        <Card.Footer >
            <button className="btn btn-info ClientEditBtn">
                <DeleteOutlineIcon></DeleteOutlineIcon>
            </button>
            <button className="btn btn-info ClientDeleteBtn">
                <EditOutlinedIcon></EditOutlinedIcon>
            </button>
        </Card.Footer>
    </Card>

);

export default clientCard;

我已将客户卡导入我的主文件并显示它。这就是我调用函数的方式。

<ClientCard onClick={() => {function1()}}/>

你能帮我了解当用户点击卡片时如何调用函数吗？

【问题讨论】：

你是从另一个 .js 文件调用这个函数 1 吗？
function1 在我调用函数的同一个文件中可用（即 main.js）
不确定这是否是您要查找的内容，但您看过这个吗？ so thread

标签： reactjs mern bootstrap-5 card

【解决方案1】：

您可以将onClick 函数作为道具从调用（父）组件传递给子（ClientCard）。

const ClientCard = (props) => {
    return (
        <Card className="text-center card-mine" onClick={props.onClick}>
            <Card.Header>
                Header
            </Card.Header>
            <Card.Body>
                Body
            </Card.Body>
        </Card>
    )
};

const Example = (props) => {
  return (
    <div>
        <ClientCard onClick={()=>{alert('clicked!')}} />
    </div>
  );
}

ReactDOM.render(
  <Example />,
  document.getElementById('root')
)

react-bootstrap on Codeply

【讨论】：

感谢您的帮助

【解决方案2】：

将函数传递给props并调用它

 <ClientCard passfunction={myfunction1}/>

然后像这样使用它

    const clientCard = ({ client, passfunction }) => (
        <div onClick={() => { passfunction() }}>
            <Card className="text-center card-mine" >
                <Card.Header>Header</Card.Header>
                <Card.Body >Body</Card.Body>
                <Card.Footer >Footer</Card.Footer>
            </Card>
        </div>
    );
    
    export default clientCard;

【讨论】：

是的，非常感谢，我完全按照您说的做了，但必须将 function1 作为箭头函数传递给 props。
现在再检查一下？
是的，现在可以使用了，非常感谢您的帮助