Onclick 按钮没有被称为 React答案

【问题标题】：Onclick Button is not being called ReactOnclick 按钮没有被称为 React
【发布时间】：2021-07-20 09:50:45
【问题描述】：

我有一个处理卡片的组件，当您单击它时，它会将您重定向到过去的路线，但您的 OnClick 不起作用。我想知道我是否会出错

  function Characters({
  characters,
  getAllCharacters,
  filterCharacters,
}) {
  const history = useHistory();

  useEffect(() => {
    characters.length === 0 && getAllCharacters();
  }, [getAllCharacters]);

  return (
    <Fragment>
      <Header />
      <Search characters={characters} />
     { inputCharacters !== "" && filterCharacters.length > 0 ? (
        <ListContainer>
          {filterCharacters.map((characters) => (
            <CardItem
              onClick={() => {
                history.push(`/characters/${characters.id}`, {
                  params: { characters },
                });
              }}
              key={characters.id}
              name={characters.name}
              images={
                characters.thumbnail.path + "." + characters.thumbnail.extension
              }
            />
          )}
        </ListContainer>

组件 CardItem：

 export default function CardItem(props) {
  return (
    <Container url={props.images}>
      <Content>
        <p>{props.name}</p>
      </Content>
    </Container>
    
  );
}

【问题讨论】：

你的Container 和Content是什么？
你能提供更多关于什么不起作用的细节吗？有错误吗？实际与预期的结果是什么？ CardItem 在哪里使用 onClick 属性？它需要传递给可交互的 DOM 元素，例如 button。

标签： javascript reactjs button onclick

【解决方案1】：

因为您没有在CardItem 中使用onClick。您只需像这样更新：

<p onClick={props.onClick}>{props.name}</p>

如果Container 或Content 支持onClick，则不能将onClick={props.onClick} 像道具一样放在此组件中

【讨论】：