How to determine which React component fires the onKeyUp event?

Question

Let's say we have one handler onKeyUp:

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

And we have a couple of input components that can call a handler:

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

How to do this so that the handler can detect whether it was onKeyUpstarted with loginor pwd?

The script is tab tab detection pwd, and then I will try to save the text fields (but not where I exit login).

I tried to learn in detail e.target, but could not figure out how to reference the source component.

Update

, . , e.target . , ref, . ref, e.target.value.

Answer 1

React Event System documentation:

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>
        );
    }
}