点击时未触发onClick事件-React

devpato

我是新手，我正在努力使我的onClick正常运行。当页面呈现时，我看到被调用（多次，具体取决于数组中的项目数），但没有单击。

const BlogPage = props => {
          const posts = props.data.allContentfulPost.edges;
          const postsStable = props.data.allContentfulPost.edges;
          const categoriesStyle = {
            marginBottom: '8px',
          };

          const filterCategories = category => {
            console.log('here', category);
            // this.posts = this.posts.filter(p => p.catergory === category);
          };.

        return (
        <div style={categoriesStyle}>
            {posts.map(({ node: c }) => (
              <Badge onClick={filterCategories(c.category)}
                  key={c.id}
                  category={c.category}
                  color="#fff">
                  {c.category}
               </Badge>
             ))}
         </div>
        );
    };

我试过了：

onClick={() => filterCategories(c.category)}

和

onClick={() => {
                  filterCategories(c.category);
                }}

const Badge = ({ children, category = 'Other', color = '#4a4a4a' }) => {
  return (
    <Container background={pillColor(category)} color={color}>
      {children}
    </Container>
  );
};

Badge.propTypes = {
  children: PropTypes.node.isRequired,
  category: PropTypes.string,
  color: PropTypes.string,
};

根据答案看来，问题是Badge不是HTML元素。

devpato

<div style={categoriesStyle}>
                {posts.map(({ node: c }) => (
                  <span
                    tabIndex="0"
                    key={c.id}
                    onClick={() => filterCategories(c.category)}
                    role="button"
                    onKeyDown={filterCategories}
                  >
                    <Badge value={c.category} category={c.category} color="#fff">
                      {c.category}
                    </Badge>
                  </span>
                ))}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。