React js：将焦点设置为先前禁用的按钮

Question

（问题在最后）我有一个按钮，它会在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);

Answer 1

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

尝试使用event.currentTarget获取按钮实例。 希望这可以帮助。如果您在此处提供问题摘要，将会更好。