问题描述
我想在用户点击卡片时调用一个函数(我使用了 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()}}/>
解决方法
您可以将 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')
)
,
将函数传递给 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;