Javascript 如何在不激活onClick的情况下推送元素？

我试图在学习ReactJS的同时创建一个简单的待办事项列表

对于我的待办事项列表中的每个项目，它们都按

group

分组。例如，我有组

采购

和

建造飞机

以及该组下每个

任务

完成的时间

我试图显示组名，显示该组下完成的任务总数

然后，当您单击组名时，页面将更改以显示各个任务

经过数小时的尝试，我发现当我创建组名时，我传递的onClick会在创建元素的过程中被调用

在父

App

文件中，我有

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      toDoItems: null,
      uniqueGroups: null,
      currentView: "AllGroup"
    };
  }

  componentDidMount = () => {
    let uniqueGroups = [];
    fetch("/data.json")
      .then(items => items.json())
      .then(data => {
        for (let i = 0; i < data.length; i++) {
          if (!uniqueGroups.includes(data[i].group)) {
            uniqueGroups.push(data[i].group);
          }
        }
        this.setState({
          toDoItems: [...data],
          uniqueGroups: uniqueGroups,
        });
      })
  };

  onH2Click = (givenGroup) => {
    this.setState({
      currentView: givenGroup
    })
    console.log(this.state.currentView);
  }


  render() {
    if (this.state.toDoItems && this.state.uniqueGroups) {
      // console.log(this.state.currentView);
      return (
        <div>
          {this.state.currentView === "AllGroup" && <AllGroupView onH2Click={this.onH2Click} taskProgress={this.state.taskProgress} uniqueGroups={this.state.uniqueGroups} toDoItems={this.state.toDoItems} />}
          {this.state.currentView !== "AllGroup" && <SpecificGroupView onH2Click={this.onH2Click} />}
        </div>
      );
    } else {
      return <h1>Loading</h1>
    }

  }
}

然后是

SpecificGroupView

组件（它还没有开发出来）

我想我应该改用map，但我不确定如何将我当前的逻辑融入map。

---

有什么想法吗？非常感谢大家

使用

onClick={this.props.onH2Click（uniqueGroups[n]）}

直接调用函数，而不是传递函数

使用ES6箭头功能：

listItems.push(<li key={n}><h2 className="h2" onClick={() => this.props.onH2Click(uniqueGroups[n])} >{uniqueGroups[n]}</h2><p>{completed} OF {total} TASKS COMPLETE</p></li>);

listItems.push（
this.props.onH2Click（uniqueGroups[n]）}>{uniqueGroups[n]}{completed}个{total}任务完成
）；

---

我会解决的

尝试在使用参数的onClick函数中使用

onClick={（）=>this.props.onH2Click（uniqueGroups[n]）}

而不是只使用

onClick={this.props.onH2Click（uniqueGroups[n]）}

。对于您的特定GroupView组件中的onClick函数也是如此。@grenzbotin我认为这有效吗？但是现在我的onClick在

SpecificGroupView

中没有任何作用。但是您的特定组视图被渲染了吗？您看到是否可以触发单击了吗？是的，将呈现SpecificGroupView。因此onClick在AllGroupView中工作。当我将内部文本为“All Group”的h2的onClick更改为

console.log（“t”）

时，什么也不会发生，但当我执行

（）=>console.log（“t”）

时，它会在clickSo ya上打印t，对于AllGroupView和SpecificGroupView，它应该以同样的方式工作。在SpecificGroupView中调用它的方式应该是：

onClick={（）=>this.props.onH2Click（“AllGroup”）}

。在你的父母身上，它仍然应该是

class SpecificGroupView extends Component {
  render() {
    return (
      <div>
        <div className="row">
          <h1>Task Group 1</h1>
          <h2 onClick={this.props.onH2Click("AllGroup")}>ALL GROUPS</h2>
        </div>
        <ul className="custom-bullet">
          <li className="locked">
            <h2>Locked Task</h2>
          </li>
          <li className="incomplete">
            <h2>Incomplete Task</h2>
          </li>
          <li className="completed">
            <h2>Completed Task</h2>
          </li>
        </ul>

      </div >
    )
  }
}

 listItems.push(<li key={n}><h2 className="h2" onClick={this.props.onH2Click(uniqueGroups[n])} >{uniqueGroups[n]}</h2><p>{completed} OF {total} TASKS COMPLETE</p></li>);

listItems.push(<li key={n}><h2 className="h2" onClick={() => this.props.onH2Click(uniqueGroups[n])} >{uniqueGroups[n]}</h2><p>{completed} OF {total} TASKS COMPLETE</p></li>);