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

比方说，我们有一个onKeyUp处理程序：如何检测哪个React组件触发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得到价值。

来源

2016-03-08 Daniel May

你试过'e.target'吗？ – haim770

谢谢。是的，我做到了。我更新了我的帖子以澄清这一点。 –

正如React's Event System documentation说：

你的事件处理程序将被传递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> 
     ); 
    } 
}

来源

2016-03-08 09:04:50

谢谢。你是对的。根据更新后的问题，我实际上希望得到''ref''的句柄来获取值，但我可以只是''e.target.value''。 –

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

回答

相关问题