单击卡片时如何调用函数 - MERN 堆栈

Question

我想在用户点击卡片时调用一个函数（我使用了来自 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()}}/>

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

Answer 1

将函数传递给 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;

Answer 2

您可以将 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

单击卡片时如何调用函数 - MERN 堆栈

How to call a function when a Card is Clicked - MERN Stack

reactjs

mern

bootstrap-5

card