Question

假设我们有一个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获得价值。

Answer 1

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

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

1 个答案: