如何在没有第三方库的情况下捕获引导下拉值？

Question

我在我的 React 应用程序中使用没有第三方库（如 react-bootstrap 或 ...）的 bootstrap 5.1。 我能够看到下拉按钮在我的反应应用程序上正常工作，但我无法捕获选择不同下拉选项的值。我试图用<option value='...'> 替换<a> 标签，但没有成功。有什么想法吗？

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown link
  </a>

  <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

Answer 1

a 标签不支持 value 属性 (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a)。

同样，option 标签也不能没有select/datalist/optgroup (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option)。

如果您仍然需要与标签关联的某种类型的值，请使用类似：data-value={your_value}。然后使用被点击元素的数据集。

Answer 2

你可以试试下面的代码

export default function App() {
  const onChangeClick = (value) => {
    console.log(value);
  };
  return (
    <div class="dropdown">
      <a
        class="btn btn-secondary dropdown-toggle"
        href="#"
        role="button"
        id="dropdownMenuLink"
        data-bs-toggle="dropdown"
        aria-expanded="false"
      >
        Dropdown link
      </a>

      <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
        <li>
          <a
            class="dropdown-item"
            href="#"
            onClick={() => onChangeClick("action")}
          >
            Action
          </a>
        </li>
        <li>
          <a
            class="dropdown-item"
            href="#"
            onClick={() => onChangeClick("another action")}
          >
            Another action
          </a>
        </li>
        <li>
          <a
            class="dropdown-item"
            href="#"
            onClick={() => onChangeClick("else action")}
          >
            Something else here
          </a>
        </li>
      </ul>
    </div>
  );
}