如何检测哪个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然后我继续尝试保存文本字段(但不是我选中的位置login).

我已经尝试了解细节,e.target但无法弄清楚如何引用原始组件.

更新

对不起,一定不要想清楚.是的,e.target是对原始组件的引用.我希望能够获得ref价值.但是我不需要参考,我可以从中获得价值e.target.value.

Answer 1

如React的Event System文档中所述:

您的事件处理程序将传递SyntheticEvent的实例,这是一个围绕浏览器本机事件的跨浏览器包装器.它具有与浏览器本机事件相同的接口,包括stopPropagation()和preventDefault(),但事件在所有浏览器中的工作方式相同.

因此,a的实例将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>
        );
    }
}