Question

我有一个onClick事件定义，它运行良好：

onClick={this.props.removeFunctionsData.bind(null,this.props.path,this.props.obj.data_type)}

现在，我想在同一onClick上定义两个事件。我尝试这样做：

onClick={(e)=>{this._onClose(e);this.props.removeFunctionsData.bind(null,this.props.path,this.props.obj.data_type);}}

但是在这种情况下，只有 this._onClose（e）有效，而不是原始版本。我该如何解决？

Answer 1

在组件内部，使用ES6 arrow function syntax定义一个handleClick函数。此语法不会创建新的上下文，因此您不必在构造函数内或调用它时绑定this。

这是一个使用我从您的帖子中获得的信息的示例

class Example extends React.Component {
    handleClick = () => this.props.removeFunctionsData(this.props.path, this.props.obj.data_type);

    render() {
        return (
            <ComponentToClick onClick={this.handleClick} />
        )
    }
}

Answer 2

原始答案：

您可以通过在末尾添加()来执行功能：

onClick={
  (e)=>{
    this._onClose(e);
    this.props.removeFunctionsData.bind(null,this.props.path,this.props.obj.data_type)();
  }
}

编辑：正如dschu所评论的那样，上面的代码非常糟糕，在render方法中绑定或使用箭头函数是一种不好的做法，因为它每次都会创建一个新函数。

在这种情况下，绑定函数是没有用的，因为您将null作为第一个参数传递。
要以通用方式解决箭头函数性能问题，必须将函数绑定到构造函数中或声明一个arrow方法。

这是执行所需操作的更好代码：

Class MyComponent extends React.Component {
  // your other class methods
  handleClick = (e) => {
    this._onClose(e);
    this.props.removeFunctionsData(this.props.path,this.props.obj.data_type);
  }
  render() {
    <div onClick={this.handleClick} />
  }
}

定义多个onClick事件后，onClick无法正常工作

2 个答案:

这是一个使用我从您的帖子中获得的信息的示例