javascript - 如何检测哪个 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 tab 关闭的地方)。

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

更新

对不起，一定是没想清楚。是的，e.target 是对原始组件的引用。我一直在寻找 ref 的句柄来获取值。但我不需要 ref，我可以从 e.target.value 中获取值。

Answer 1

如 React's Event System documentation 中所述:

Your event handlers will be passed instances of SyntheticEvent, a cross-browser wrapper around the browser's native event. It has the same interface as the browser's native event, including stopPropagation() and preventDefault(), except the events work identically across all browsers.

因此，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>
        );
    }
}