How to detect which React component triggers onKeyUp event?

Question

Let's say we have a single onKeyUp handler:

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

And we have a couple of input components, both of which could trigger the handler:

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

How do I make it so the handler can detect if the onKeyUp was triggered from login or pwd?

A scenario is where I detect a tab press on pwd and then I proceed to try to save the text fields (but not where I tab off from login).

I've tried looking into detail of e.target but couldn't figure out how to reference the originating component.

Update

Sorry, must not be thinking clearly. Yes, e.target is a reference to the originating component. I was looking to get a handle on ref to get the value. But I don't need the ref, I can just get the value from e.target.value.

Answer 1

As stated in 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.

Thus, an instance of a SyntheticEvent is passed to your callback

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

Edit : In case you really want to access component's ref name before doing anything, here is how you could do it in 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>
        );
    }
}