Javascript 反应-将函数传递给子组件不起任何作用

首先，我必须说，我已经查看了这个站点上所有的“将函数传递给子组件”，但没有找到解决问题的方法。 我有一个父类：

import React from 'react';
import $ from 'jquery';
import Project from './Project';
import NewProjectModal from './NewProjectModal';
/**
 * A projects menu
 */
class ProjectsMenu extends React.Component 
{
  constructor(props) 
  {
    super(props);
    var projects = [];
    this.state = {_projects : projects};
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(e) {
    e.preventDefault();
    console.log("Hello there");
  }


  render() 
  {    
    return (
    <div className="column">
      {/*problem here:*/}
      <NewProjectModal onClick={this.handleClick.bind(this)} />   

      <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>  
  );
  }//render()

从“React”导入React；
从“jquery”导入美元；
从“./Project”导入项目；
从“/NewProjectModal”导入NewProjectModal；
/**
*项目菜单
*/
类ProjectsMenu扩展了React.Component
{
建造师（道具）
{
超级（道具）；
var项目=[]；
this.state={u projects:projects}；
this.handleClick=this.handleClick.bind（this）；
}
handleClick（e）{
e、 预防默认值（）；
log（“你好”）；
}
render（）
{    
返回(
{/*这里有问题：*/}
this.showNewProjectModal（）}>新项目

{this.state._projects.map（（项，索引）=>
{item}
)}
);
}//render（）

还有一个儿童班：

import React from 'react';
import $ from 'jquery';

/**
 * A modal for the new project
 */
class NewProjectModal extends React.Component {
  constructor(props) {
    super(props);
    console.log(this.props);
  }

  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>
    );
  }//render()

从“React”导入React；
从“jquery”导入美元；
/**
*新项目的模式
*/
类NewProjectModal扩展了React.Component{
建造师（道具）{
超级（道具）；
console.log（this.props）；
}
render（）{
返回(
新项目



this.props.onClick}>Validate
);
}//render（）

---

我想通过props将handleClick（）函数传递给NewProjectModal组件。但是当我点击NewProjectModal中的按钮时，什么都没有发生。我想让它从ProjetcsMenu组件执行handleClick（）。

无需将onClick函数包装在子函数中的箭头函数中。尝试在子组件中更改此部分，因为现在您实际上没有调用所需的函数：

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

验证

---

另外，在父组件中绑定click函数两次：在构造函数中，以及在将其传递给子组件时。其中任何一个都应该足够了。

无需将onClick函数包装在子函数中的箭头函数中。尝试在子组件中更改此部分，因为现在您实际上没有调用所需的函数：

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

验证

---

另外，在父组件中绑定click函数两次：在构造函数中，以及在将其传递给子组件时。其中任何一个都应该足够了。

首先，无需在此处再次绑定该函数

此外，出于性能原因，Gleb Kost的建议更好

无论如何，这个

{（）=>this.props.onClick}

是不正确的，应该是

{（）=>this.props.onClick（）}

或者干脆是

{this.props.onClick}

---

应该有用

首先，无需在此处再次绑定函数

此外，出于性能原因，Gleb Kost的建议更好

无论如何，这个

{（）=>this.props.onClick}

是不正确的，应该是

{（）=>this.props.onClick（）}

或者干脆是

{this.props.onClick}

应该有用