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

Posted 2023-03-28

【中文标题】单击卡片时如何调用函数 - MERN Stack

【英文标题】：How to call a function when a Card is Clicked - 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

【参考方案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。

现在再检查一下？

是的，现在可以使用了，非常感谢您的帮助