React 中从 react-bootstrap NavDropdown 选项取值并展示对应符号的解决方法

你代码里存在以下几处问题导致运行报错&功能不生效：

• react-bootstrap的NavDropdown.Item的onSelect回调的第一个参数不是原生事件对象，而是对应项绑定的eventKey值，你用event.target.value无法拿到选中的棋子名称
• React的setState是异步更新逻辑，调用setPieceValue后立刻读取pieceValue拿到的还是更新前的旧值，符号匹配逻辑完全不生效
• symbol是handleChange函数内的局部变量，渲染函数作用域无法访问，直接在JSX里引用会报「变量未定义」错误
• 符号匹配逻辑里把Bishop拼写错为Bihsop，选中主教时无法匹配到对应符号
• 你把h1放在了下拉菜单内部，只有展开下拉时才会显示，可根据需求调整展示位置

import React, { useState } from 'react';
import { Navbar, Container, Nav, NavDropdown } from 'react-bootstrap';

const PieceNotation = () => {
  const [pieceValue, setPieceValue] = useState('King');

  // 直接根据当前选中的棋子值计算对应符号
  const getPieceSymbol = () => {
    switch(pieceValue) {
      case 'Queen': return 'Q';
      case 'Rook': return 'R';
      case 'Bishop': return 'B';
      case 'Knight': return 'N';
      case 'Pawn': return 'a';
      default: return 'K';
    }
  }

  // onSelect直接接收eventKey作为参数
  const handleSelect = (selectedKey) => {
    setPieceValue(selectedKey);
  }

  return (
    <div>
      <Navbar variant="dark" bg="dark" expand="lg">
        <Container fluid>
          <Navbar.Brand href="#home">Piece-Notation</Navbar.Brand>
          <Navbar.Toggle aria-controls="navbar-dark-example" />
          <Navbar.Collapse id="navbar-dark-example">
            <Nav>
              <NavDropdown
                id="nav-dropdown-dark-example"
                title="Dropdown"
                menuVariant="dark"
              >
                {/* 每个选项绑定对应的eventKey */}
                <NavDropdown.Item eventKey="King" onSelect={handleSelect}>King</NavDropdown.Item>
                <NavDropdown.Item eventKey="Queen" onSelect={handleSelect}>Queen</NavDropdown.Item>
                <NavDropdown.Item eventKey="Rook" onSelect={handleSelect}>Rook</NavDropdown.Item>
                <NavDropdown.Item eventKey="Knight" onSelect={handleSelect}>Knight</NavDropdown.Item>
                <NavDropdown.Item eventKey="Bishop" onSelect={handleSelect}>Bishop</NavDropdown.Item>
                <NavDropdown.Item eventKey="Pawn" onSelect={handleSelect}>Pawn</NavDropdown.Item>
                <NavDropdown.Divider />
                <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
              </NavDropdown>
            </Nav>
          </Navbar.Collapse>
        </Container>
      </Navbar>
      {/* h1移到导航栏外面，页面固定显示 */}
      <h1>{getPieceSymbol()}</h1>
    </div>
  )
}

export default PieceNotation;

如果你需要把符号展示在下拉菜单内部，把h1标签放回NavDropdown组件内部即可。

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