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

Question

我正在尝试将参数传递给父 class 中的事件处理程序，但遇到了一些困难。我已经进行了大量研究并且接近回答，但有些事情不太奏效。下面我将给出一个基本的假设示例，说明我想做什么但行不通。

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 事件触发。

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>

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

Passing a parameter to an event handler in the parent class from a child class ReactJS

javascript

reactjs

eventhandler