文章/答案/技术大牛

发布

社区首页 >问答首页 >将焦点强制到在上一次呈现中禁用的按钮元素

问将焦点强制到在上一次呈现中禁用的按钮元素
EN

Stack Overflow用户

提问于 2019-05-06 13:40:01

回答 1查看 203关注 0票数 1

我有一个按钮在onClick事件上打开一个模态。我希望该按钮在用户单击该按钮后被禁用，并在模式关闭时重新启用。

我已经将btnDisabled的初始状态设置为false，并执行了以下操作：(按预期工作)

<Button
    label='Mybutton'
    className={['btn-outline-primary']}
    onClick={this.loadModel}
    disabled={this.state.btnDisabled}
/>

按钮的onClick处理程序如下所示：

loadModel(event) {
    this.setState({
      ModelOpen: true,
      btnDisabled: true,
    });
    this.activeElement = event.target;
  }

模态关闭按钮(X)处理程序如下：

closeModel() {
    this.setState({
      ModelOpen: false,
      btnDisabled: false,
    });
    this.activeElement.focus();
  }

问题是，焦点并没有转移到Mybutton上。当我试图在控制台日志上输出document.activeElement.outerHTML时，它会输出关闭按钮。正因为如此，我的测试失败了，因为他们期望MyButton是活动元素。

更新如果我删除按钮禁用逻辑，测试就能正常工作。以下是失败的断言：

expect(wrapper.find('.btn-outline-primary').html()).toEqual(document.activeElement.outerHTML);

发布于 2019-05-06 13:48:10

您正在向Button元素中添加eventListener。在javascript中，事件冒泡的原因可能有所不同。

尝试使用event.currentTarget获取按钮实例。希望这能有所帮助。如果您在这里提供一个问题片段，情况会更好。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56006442

复制

相似问题

问将焦点强制到在上一次呈现中禁用的按钮元素EN