时间戳

首页 > 解决方案 > 从子类 ReactJS 将参数传递给父类中的事件处理程序

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

问题描述

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

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

标签： javascriptreactjseventhandler

解决方案

对您的代码进行以下更新

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

推荐阅读