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

How to detect which React component triggers onKeyUp event?

本文关键字：组件 事件 onKeyUp React 何检测 检测      更新时间：2023-09-26

假设我们有一个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上的 Tab 键按下，然后我继续尝试保存文本字段（但不是我从 login 上跳下来的地方）。

我尝试查看e.target的详细信息，但无法弄清楚如何引用原始组件。

更新

对不起，一定是想不清楚。是的，e.target是对原始组件的引用。我希望掌握ref以获得价值。但我不需要 ref，我可以从 e.target.value 中获取值。

如 React Event System文档中所述：

您的事件处理程序将传递 SyntheticEvent 的实例，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>
        );
    }
}
相关文章：