Question

我有一些相似的元素：

 <div ref={this.ref1} onClick={this.handleClick} className="icon-wrapper"></div>
 <div ref={this.ref2} onClick={this.handleClick} className="icon-wrapper"></div>
 <div ref={this.ref3} onClick={this.handleClick} className="icon-wrapper"></div>

在我的构造函数中，我声明以下引用：

constructor(props) {

    super(props);

    this.ref1 = React.createRef();
    this.ref2 = React.createRef();
    this.ref3 = React.createRef();

}

我正在尝试将这些引用传递给它们各自的handleClick()函数。像这样：

 <div ref={this.ref1} onClick={this.handleClick(ref1)} className="icon-wrapper"></div>

或

 <div ref={this.ref1} onClick={this.handleClick(this.ref)} className="icon-wrapper"></div>

我正在尝试像这样处理handleClick函数中的ref：

handleClick = (ref) => {
    console.log(ref);
}

就像一个荒唐的猜测一样，我尝试了：

handleClick = () => {
    console.log(this.ref.current);
}

这似乎完全是错误的，因为onClick={this.handleClick(ref)}会立即调用该函数，而这并不是单击函数所需要的。

如何将不同的引用传递给同一函数，以便该函数知道谁调用了它？

Answer 1

这里的主要问题是您正在立即调用该功能。那就是应用()到函数末尾所做的事情。相反，您需要传递一个需要该事件调用的回调函数。这是通过传递函数引用来完成的。

如果需要传递值，可以在此处使用bind。 .bind将返回要调用的新函数。 null作为this上下文的第一个参数，如果null已绑定到您的类，则null不会更改其上下文。如果您需要绑定此方法，则只需传递this而不是null。

我建议尽管传递一些要映射的内容，而不是整个引用，

<div ref={this.ref1} onClick={this.handleClick.bind(null, 'ref1')} className="icon-wrapper"></div>

那么您将像这样访问

handleClick = (ref, event) => {
    if (!this[ref]) return
    console.log(this[ref].current);
}

将参数传递给函数的大多数用例是因为您需要特定的键。在这种情况下，您似乎只想访问元素本身。您可以从事件本身中获取该信息。

<div onClick={this.handleClick} className="icon-wrapper"></div>

handleClick = (event) => {
    console.log(event.target);
}

Answer 2

您问题的答案是使用lambda方法，

 <div ref={this.ref1} onClick={() => this.handleClick(this.ref1)} className="icon-wrapper"></div>
 <div ref={this.ref2} onClick={() => this.handleClick(this.ref2)} className="icon-wrapper"></div>
 <div ref={this.ref3} onClick={() => this.handleClick(this.ref3)} className="icon-wrapper"></div>

但是，如果您要访问的是触发事件的目标，则可以使用

handleClick = (event) => {
    console.log(event.target);
}

<div onClick={this.handleClick} className="icon-wrapper"></div>

编辑：以下是一些具有更好（边缘）性能的替代方法。

handleClick1 = () => this.handleClick(this.ref1)

handleClick1 = this.handleClick.bind(this, this.ref1)

render() {
  return (<div ref={this.ref1} onClick={this.handleClick1} className="icon-wrapper"></div>)
}

如何获得多个裁判使用相同的handleClick函数？

2 个答案: