Javascript 从子类向父类中的事件处理程序传递参数

我试图将参数传递给父类中的事件处理程序，但遇到了一些困难。我已经做了大量的研究，接近答案，但有些东西不太管用。下面我将给出一个基本的假设性例子，说明我想做的事情是行不通的

class Parent extends React.Component {
       constructor(props){
           super(props);
           this.handleClick = this.handleClick.bind(this);
       }

       handleClick(i){
           return event => console.log(i);
       }

       render(){
          return <Child onClick={this.handleClick}></button>;
       }
}

class Child extends React.Component {
       render() {
            const myVar = 2;
            return <button onClick={this.props.onClick(myVar)}></button>;
       }
}

类父级扩展React.Component{
建造师（道具）{
超级（道具）；
this.handleClick=this.handleClick.bind（this）；
}
handleClick（一）{
返回事件=>console.log（i）；
}
render（）{
返回；
}
}
子类扩展了React.Component{
render（）{
常数myVar=2；
返回；
}
}

---

我知道传递给子对象的onClick prop不是函数，所以我无法直接向它传递参数。做这件事最好的方法是什么？谢谢你的帮助

对代码进行以下更新

class Child extends React.Component{
       render(){
            const var = 2;
            return <button onClick={ () => {this.props.onClick(var)} }</button>;
       }
}

立即调用子组件上的onClick，而不是等待onClick事件触发

你做不到

handleClick(i){
           return (e => {console.log(i)});
       }

相反，试试看

handleClick(i){
          console.log(i)
       }

并将事件处理移动到调用它的位置。所以不是

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

---

如果onClick props不是函数，您如何调用它。它必须是一个函数。你希望你的代码最终做什么？目前，您的代码似乎可以正常运行，但无法执行任何操作meaningful@TaylorGray考虑接受解决了你的问题的答案。“Goodo23”Josh Pittman和你的答案都非常有用。谢谢还有其他绑定事件处理程序的方法，上面可能是开始使用的简单方法。如果有兴趣，这里有更多的阅读
<button onClick={this.props.onClick(var)}</button>

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