如何通过编程方式模糊React Bootstrap的NavLink？

你的问题核心在于setState是异步操作：调用setAboutModalShowState(false)后立即执行blur()时，组件还未完成重渲染，模态框的关闭逻辑也没处理完，导致失焦操作无效；另外部分浏览器会在模态框关闭后自动将焦点回退到触发元素，进一步抵消了blur()的效果。

不需要自定义类名，用以下简便方法就能解决：

方案：用useEffect监听模态框状态，在关闭后执行失焦 #

利用React的useEffect钩子监听模态框的显示状态，当状态变为false（模态框关闭）时再调用blur()。这样能确保在组件完成重渲染、模态框彻底关闭后执行失焦操作，避开异步更新和浏览器焦点回退的影响。

修改后的完整代码：

import { useState, useRef, useEffect } from 'react';
import { Modal, Button, Navbar, Container, Nav } from 'react-bootstrap';

function App() {
  const aboutLinkRef = useRef(null);
  const navLinks = {
    ABOUT: 'ABOUT',
    LOGIN: 'LOGIN'
  }
  const [aboutModalShowState, setAboutModalShowState] = useState(false);

  const navLinkClicked = (value) => {
    if (value === navLinks.ABOUT) {
      setAboutModalShowState(true);
    }
  }

  const hideAboutModal = () => {
    setAboutModalShowState(false);
  }

  // 监听模态框关闭状态，执行失焦
  useEffect(() => {
    if (!aboutModalShowState && aboutLinkRef.current) {
      aboutLinkRef.current.blur();
    }
  }, [aboutModalShowState]);

  return (
    <div className="App">
      <Modal show={aboutModalShowState} onHide={hideAboutModal}>
        <Modal.Header>
          <Modal.Title>About title</Modal.Title>
        </Modal.Header>
        <Modal.Body>About description</Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={hideAboutModal}>
            Close
          </Button>
        </Modal.Footer>
      </Modal>

      <Navbar collapseOnSelect expand="lg" bg="light" variant="light">
        <Container>
          <Navbar.Brand href="/">TITLE</Navbar.Brand>
          <Navbar.Toggle aria-controls="responsive-navbar-nav" />
          <Navbar.Collapse id="responsive-navbar-nav">
            <Nav className="me-auto"></Nav>
            <Nav>
              <Nav.Link id='aboutNavLink' ref={aboutLinkRef} onClick={() => navLinkClicked(navLinks.ABOUT)}>About</Nav.Link>
              <Nav.Link id='loginNavLink'>Login</Nav.Link>
            </Nav>
          </Navbar.Collapse>
        </Container>
      </Navbar>
    </div>
  );
}

export default App;

关键改动说明： #

1. 移除hideAboutModal函数中直接调用的blur()代码
2. 添加useEffect钩子，依赖aboutModalShowState状态：
   • 当状态变为false时，检查aboutLinkRef是否存在，若存在则执行blur()
   • 这个时机是组件完成重渲染后的阶段，能确保失焦操作生效

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