如何在 React 中将 onClick 传递给父级

Question

我有一个名为 beercard 的 React 组件，它为我填充了一个项目并添加了一个赞按钮，这是 Beercard 文件：

function Beercard(props) {
  const [active, setActive] = useState(false);

  const changeLike = () => {
    setActive(!active)
  }

  return (
    <BeerCard>
      <Content>
        <Lockup text={props.description} tag="h3" title={props.title}/>
      </Content>
      <ImagContainer>
        <Like liked={active}  />
        <Image url={props.image}/>
      </ImagContainer>
    </BeerCard>
  )
}

然后我有 Like 组件，我将使用它来处理 onClick：

const Icon = styled.svg`
  width: 32px;
  height: 32px;
  stroke:  white;
  stroke-width: 2px;
  fill: ${props => props.liked ? 'white' : 'transparent'};
`


const like = (props) => {
  return (
    <LikeButton onClick={props.action}>
      <Icon liked={props.liked}>
        <path 
          id="heart-icon" 
          d="M16,28.261c0,0-14-7.926-14-17.046c0-9.356,13.159-10.399,14-0.454c1.011-9.938,14-8.903,14,0.454
    C30,20.335,16,28.261,16,28.261z"
        />
      </Icon>
    </LikeButton>
  )
}

一切正常，即 css 用于填充和未填充，然后如果我在 beercard 文件中将状态设置为 true，它会将心脏设置为 active/fills。但是 onClick 函数没有做任何事情，我不确定如何在两个文件之间进行通信以添加此事件。这是一个简单的 on/off 切换 true 和 false 但我不知道如何处理事件，有人可以看到我需要做什么吗？

Answer 1

如果我没理解错的话，您只需要将所需的函数作为属性传递给 Like 组件即可。你实际上已经完成了 90%，但你在 onClick 中调用 props.action，但没有向操作属性传递任何内容。由于您已经拥有一切，您可以将使用 Like 组件的行更改为：

<Like liked={active} action={changeLike} />

如何在 React 中将 onClick 传递给父级

How to pass an onClick to parent in React

parent-child

reactjs