React-Bootstrap按钮点击后回车重复触发onClick问题求助

点击按钮后它会保留焦点，浏览器默认行为中，回车键会触发当前聚焦按钮的onClick事件——这就是滚动后按回车仍重复触发的原因：按钮一直处于聚焦状态，直到你点击其他元素让它失焦。

方案1：点击后主动让按钮失焦 #

在按钮的点击回调里，直接让当前激活元素（即该按钮）失去焦点：

<Button onClick={() => { 
  this.reset();
  document.activeElement.blur();
}}>Reset</Button>

方案2：使用Ref精准控制按钮失焦 #

如果document.activeElement存在不确定性，给按钮添加Ref，直接操作按钮失焦更可靠：

class YourComponent extends React.Component {
  resetBtnRef = React.createRef();

  reset = () => {
    console.log('triggers');
    // 可选链避免null报错
    this.resetBtnRef.current?.blur();
  }

  render() {
    return (
      <Button ref={this.resetBtnRef} onClick={this.reset}>Reset</Button>
    );
  }
}

方案3：让按钮不可聚焦（不推荐无障碍场景） #

若不需要按钮被聚焦，可设置tabIndex="-1"，这样按钮不会获得焦点，自然不会被回车触发：

<Button tabIndex="-1" onClick={() => this.reset()}>Reset</Button>

注意：该方案会影响键盘导航的无障碍性，非特殊需求优先选择前两种方案。

内容的提问来源于stack exchange，提问作者Harish