React向子组件传递函数无响应问题求助

嘿，我瞅了你的代码，找到问题所在啦！咱们一步步来修复：

核心问题：子组件按钮未执行传递的函数 #

在你的NewProjectModal组件里，按钮的onClick事件只引用了函数，但没有触发执行：

<button onClick={()=> this.props.onClick}>Validate</button>

这里的箭头函数只是返回了this.props.onClick函数本身，并没有调用它，所以点击按钮自然没反应。

修复方案 #

方案1：直接传递函数引用（推荐） #

因为this.props.onClick本身就是绑定好this的函数，你可以直接把它传给按钮的onClick，React会在点击时自动调用它：

<button onClick={this.props.onClick}>Validate</button>

方案2：在箭头函数中调用函数 #

如果你需要在调用前做额外处理（比如传递参数），可以在箭头函数里加括号执行函数：

<button onClick={() => this.props.onClick()}>Validate</button>

额外优化：父组件避免重复绑定 #

在ProjectsMenu的constructor里，你已经通过this.handleClick = this.handleClick.bind(this);绑定了this，所以传递函数时不需要再重复bind(this)，直接传this.handleClick即可，更高效：

<NewProjectModal onClick={this.handleClick} />

修改后的完整代码片段 #

父组件ProjectsMenu的render方法： #

render() {
  return (
    <div className="column">
      <NewProjectModal onClick={this.handleClick} />
      <a id="new-project" className="trigger" onClick={()=>this.showNewProjectModal()}>New project</a><br/>
      {this.state._projects.map((item,index) => <div key={index}>{item}</div> )}
    </div>
  );
}

子组件NewProjectModal的render方法： #

render() {
  return (
    <div id="new-project-modal">
      <div>
        <p>New Project</p>
        <input type="text" name="project-name"/><br/>
        <button onClick={this.props.onClick}>Validate</button>
      </div>
    </div>
  );
}

这样修改后，点击子组件的"Validate"按钮，就会触发父组件的handleClick方法，控制台会输出"Hello there"啦！

内容的提问来源于stack exchange，提问作者user5381829