如何获取React-Bootstrap Dropdown下拉菜单选中项的文本值

• 你当前将onSelect事件绑定在<Dropdown.Toggle>上是错误的，该事件需要绑定在父级<Dropdown>组件或单个<Dropdown.Item>上才能获取选中项的相关信息
• react-bootstrap的Dropdown组件onSelect回调默认接收两个参数：第一个是选中项的eventKey/href值，第二个是原生事件对象，你可以通过事件对象获取选中项文本

方案1：直接给每个Dropdown.Item绑定事件传值（最直观，不易出错） #

直接在每个选中项的onSelect回调里传入你需要获取的文本值，代码示例：

import { useState } from 'react';
import Dropdown from 'react-bootstrap/Dropdown';

function MyDropdown() {
  // 存储选中的文本值
  const [selectedText, setSelectedText] = useState('');

  const handleSelect = (text) => {
    setSelectedText(text);
    console.log('选中的文本：', text);
  }

  return (
    <Dropdown>
      <Dropdown.Toggle variant="success" id="dropdown-basic">
        {selectedText || 'Dropdown Button'}
      </Dropdown.Toggle>

      <Dropdown.Menu>
        <Dropdown.Item href="#/action-1" onSelect={() => handleSelect("Action")}>Action</Dropdown.Item>
        <Dropdown.Item href="#/action-2" onSelect={() => handleSelect("Another action")}>Another action</Dropdown.Item>
        <Dropdown.Item href="#/action-3" onSelect={() => handleSelect("Something else")}>Something else</Dropdown.Item>
      </Dropdown.Menu>
    </Dropdown>
  );
}

方案2：父级Dropdown统一绑定onSelect，通过事件对象拿文本 #

如果你不想给每个Item单独绑定事件，可以把onSelect绑在父级Dropdown上，通过第二个事件参数获取选中项的文本内容，代码示例：

import { useState } from 'react';
import Dropdown from 'react-bootstrap/Dropdown';

function MyDropdown() {
  const [selectedText, setSelectedText] = useState('');

  const handleSelect = (hrefValue, event) => {
    // 直接通过事件对象拿到选中项的文本内容
    const text = event.currentTarget.textContent;
    setSelectedText(text);
    console.log('选中的href值：', hrefValue);
    console.log('选中的文本：', text);
  }

  return (
    // 把onSelect绑在父级Dropdown上
    <Dropdown onSelect={handleSelect}>
      <Dropdown.Toggle variant="success" id="dropdown-basic">
        {selectedText || 'Dropdown Button'}
      </Dropdown.Toggle>

      <Dropdown.Menu>
        <Dropdown.Item href="#/action-1">Action</Dropdown.Item>
        <Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
        <Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
      </Dropdown.Menu>
    </Dropdown>
  );
}

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