将参数传递给子类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 prop不是函数，所以我无法直接将参数传递给它。这样做的最佳方法是什么？谢谢你的帮助！

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 on your child组件，而不是等待onClick事件触发。

Answer 2

你做不到

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

相反，试试

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

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

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

你想尝试

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