Onclick 按钮未被称为 React

Question

我有这个处理卡片的组件，当你点击它时，它会将你重定向到过去的路线，但你的 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>

组件卡片项目：

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

Answer 1

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

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

如果Container或Content支持onClick，你不能把onClick={props.onClick}像道具一样放在这个组件里

Onclick 按钮未被称为 React

Onclick Button is not being called React

javascript

onclick

button

reactjs