如何检测哪个React组件触发了onKeyUp事件？

Question

假设我们有一个单独的onKeyUp处理程序：

handleKeyUp: function(e) {
  /* handle stuff */
},

我们有几个输入组件，其中两个都可能触发处理程序：

<input type="text" ref="login" onKeyUp={this.handleKeyUp} />
...
<input type="text" ref="pwd" onKeyUp={this.handleKeyUp} />

如何使处理程序能够检测到onKeyUp是从login还是pwd触发的？

一种情况是，我检测到在pwd上按下Tab键，然后尝试保存文本字段（但不是在从login切换过来时）。

我尝试查看e.target的详细信息，但无法弄清如何引用起始组件。

更新：

抱歉，可能没有想清楚。是的，e.target是对起始组件的引用。我想获取ref的句柄以获取值。但我不需要ref，可以直接从e.target.value获取值。

- Daniel May

---

你尝试过 e.target 吗？ - haim770

谢谢。是的，我做了。我更新了我的帖子以澄清这一点。 - Daniel May

Answer 1

根据React事件系统文档所述:

您的事件处理程序将接收到 SyntheticEvent 实例，它是一个跨浏览器的包装器，包装了浏览器原生事件。它具有与浏览器原生事件相同的接口，包括 stopPropagation() 和 preventDefault()，但这些事件在所有浏览器中的工作方式相同。

因此，SyntheticEvent 实例会传递给您的回调函数。

handleKeyUp: function(event) {
    /* event is an instance of SyntheticEvent 
       from wich you can extract the currentTarget 
    */
},

编辑: 如果你真的想在进行任何操作之前访问组件的ref名称，那么以下是你可以在ES6中实现的方法:

class MyComponent extends React.Component {

    constructor() {

        super();

        this.handleLoginKeyUp = this.keyUpHandler.bind(this, 'LoginInput');
        this.handlePwdKeyUp = this.keyUpHandler.bind(this, 'PwdInput');
    }

    keyUpHandler(refName, e) {
        console.log(refName);
        // prints either LoginInput or PwdInput
    }

    render() {

        return (
            <div>
                <input type="text" onKeyUp={this.handleLoginKeyUp} ref="LoginInput" />
                <input type="text" onKeyUp={this.handlePwdKeyUp} ref="PwdInput" />
            </div>
        );
    }
}

- mr-wildcard

---

谢谢。你是对的。根据更新后的问题，我实际上是想获取“ref”的句柄来获取值，但我可以直接使用“e.target.value”。 - Daniel May

绑定函数到元素引用时，它是如何工作的？我的意思是，引用是否与本机元素完全相同，因此我可以使用"This"？ - MMMM