Как вызвать функцию при нажатии на карту - MERN Stack

Я хочу вызвать функцию, когда пользователь нажимает на карту (я использовал карту из реагирующей загрузки). Я попытался добавить функцию 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()}}/>

Не могли бы вы помочь мне, как я могу вызвать функцию, когда пользователь нажимает на карту?


reactjs mern card bootstrap-5
person Opny Tenishia Kamalenthiran    schedule 29.07.2021    source источник
comment
Вы вызываете эту функцию1 из другого файла .js?   -  person Ali Shahzil    schedule 29.07.2021
comment
function1 доступен в том же файле, в котором я вызываю функцию (это main.js)   -  person Opny Tenishia Kamalenthiran    schedule 29.07.2021
comment
Не уверен, что это то, что вы ищете, но вы смотрели на это? поток   -  person SakisTsalk    schedule 29.07.2021

Ответы (2)


arrow_upward
1
arrow_downward

Вы можете передать функцию 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 на Codeply

person Zim    schedule 29.07.2021
comment
Спасибо вам за помощь - person Opny Tenishia Kamalenthiran; 29.07.2021

arrow_upward
0
arrow_downward

Передайте функцию реквизиту и вызовите ее

 <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;
person Ali Shahzil    schedule 29.07.2021
comment
это работает ? - person Ali Shahzil; 29.07.2021
comment
Да, большое спасибо, я сделал именно то, что вы сказали, но мне пришлось передать function1 как функцию стрелки в реквизит. - person Opny Tenishia Kamalenthiran; 29.07.2021
comment
Теперь еще раз проверить это? - person Ali Shahzil; 29.07.2021
comment
Да, теперь это работает, большое спасибо за вашу помощь - person Opny Tenishia Kamalenthiran; 29.07.2021