javascript - 从子类 ReactJS 将参数传递给父类中的事件处理程序

Question

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

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>;
       }
}

我知道传递给 Child 的 onClick 属性不是函数，因此我无法直接向它传递参数。这样做的最佳方法是什么？感谢您的帮助!

Answer 1

对您的代码进行以下更新

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

此外，您应该重构父级使用的以下方法。您不必要地传递了 e 。

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

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