时间戳

首页 > 解决方案 > 单击时未触发 onClick 事件 - 反应

javascript - 单击时未触发 onClick 事件 - 反应

问题描述

我对反应非常陌生，我正在努力让我的 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 元素。

标签： javascriptreactjsgatsby

解决方案

传递给的值onClick必须是一个函数。

filterCategories(c.category)filterCategories 立即调用并将其返回值（undefined因为没有return语句）传递给onClick.

undefined不是函数。

创建一个使用所需参数调用filterCategories的函数（例如，使用bind，或仅使用函数表达式或箭头函数）并传递它。

此外，Badge不是 HTML 元素。如果您的组件没有将onClickprop 传递给 HTML 元素，则它不会在 DOM 中执行任何操作。

推荐阅读