React 功能组件不处理事件

Question

我有在我的项目中使用的故事书组件。所以我需要在我的项目中使用 Card 组件，需要添加一些样式。所以我使用样式组件中的 "styled" 添加样式。在我导出我的新 CardNew 并尝试在某些页面中使用它之后。它有效，但是当我尝试向该组件添加 onMouseLeave/onMouseEnter 事件时，它不起作用。

当我尝试使用故事书中的 Card 初始版本时，没有任何样式和添加事件，它就可以工作。这是我的代码。

const CardStyled = styled(Card)`
  width: 200px;
  height: 100px;
  margin-bottom:10px;
  color:red;
  line-height: 1.5em;
`;

export default function CardNew(props) {
  return (
    <CardStyled>
      <Card.Body>
        <p>{props.content}</p>
      </Card.Body>
    </CardStyled`enter code here`>
  )
}

然后我使用该组件并尝试处理任何事件

<CardNew onMouseEnter={() => onMouseEnter()} onMouseLeave={() => onMouseLeave()} >
</CardNew>

任何人都可以解释为什么我不能在故事书组件上制作样式然后使用它吗？谢谢

Answer 1

因为您的 CardNew 组件不是 HTML 组件。所以，你应该把所有的道具都传下去。喜欢：

export default function CardNew(props) {
    return (
        <CardStyled>
        <Card.Body>
            <p {...props}>{props.content}</p>
        </Card.Body>
        </CardStyled`enter code here`>
    )
}

这将允许您处理

元素的任何事件。

React 功能组件不处理事件

React functional component does not handle event

reactjs

storybook