reactjs - React 中的模态渲染和 onClick

Question

我是 React 的新手，我很难通过 onClick 调用组件按钮事件。
下面给出的是代码段

function Dev({value}){
    return(
        <Card>
            <CardImg top width="100%" src={value.src} alt="Card image cap" />
            <CardBody>
                <CardTitle className='text-card'>{value.title}</CardTitle>
                <CardText className='text-text'>{value.text}</CardText>
                <Button className='text-button' onClick={(value)=>{
                    return(
                        <div>
                            {value.id ? <Login /> : <Sign />}
                        </div>
                    )
                }}>{value.button}<i class={value.icon} aria-hidden="true"></i></Button>
            </CardBody>
        </Card>
);
}

value.id要么是 true或 false , 但无论哪种方式 onClick没有开火。
组件 Login和 Sign实际上是由 Modal 组成的组件。
一些帮助深表感谢。

Answer 1

要解决您的问题，您应该为组件添加状态并保留一些东西 isButtonClicked在里面:

function Dev({ value }) {
  const [isButtonClicked, setIsButtonClicked] = useState(false);

  const handleClick = () => setIsButtonClicked(true);

  return (
    <Card>
      <CardImg top width="100%" src={value.src} alt="Card image cap" />
      <CardBody>
        <CardTitle className="text-card">{value.title}</CardTitle>
        <CardText className="text-text">{value.text}</CardText>
        <Button className="text-button" onClick={handleClick}>
          {value.button}
          <i class={value.icon} aria-hidden="true"></i>
        </Button>
        {isButtonClicked && (value.id ? <Login /> : <Sign />)}
      </CardBody>
    </Card>
  );
}