如何檢測哪個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事件？

回答

相關問題