如何将函数附加到 React Bootstrap 上的 Dropdown.Toggle？

Question

我试图在单击 React Bootstrap Dropdown.Toggle 时执行一个函数。

我尝试添加

onClick

，如下所示，但这完全破坏了下拉功能，并且在单击时不显示下拉菜单：

<Dropdown>
  <Dropdown.Toggle variant="success" id="dropdown-basic" onClick={myFunction}>
    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>

有什么方法可以保留切换按钮的原始功能并在单击时仍然执行附加功能吗？

Answer 1

看起来您正在覆盖内置的 onClick，也许您可以将事件侦听器附加到

Dropdown

本身并检查它是否是从按钮触发的。

      <Dropdown
        onClick={e => {
          if (e.target.id === "dropdown-basic") {
            //do something
          }
        }}
      >
        <Dropdown.Toggle variant="success" id="dropdown-basic">
          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>

Answer 2

   const onSelect = (eventKey, event) => {
        event.preventDefault();
        event.persist();
        event.stopPropagation();
     console.log(eventKey) // selected event will trigger
    }



 <Dropdown className="d-inline mx-2" onSelect={onSelect}>
    <Dropdown.Toggle id="dropdown-autoclose-true">
      Default Dropdown
    </Dropdown.Toggle>

    <Dropdown.Menu>
      <Dropdown.Item eventKey="1" href="#">Menu Item</Dropdown.Item>
      <Dropdown.Item eventKey="2"  href="#">Menu Item</Dropdown.Item>
      <Dropdown.ItemeventKey="3"  href="#">Menu Item</Dropdown.Item>
    </Dropdown.Menu>
  </Dropdown>

Answer 3

我已经创建了这样的自定义下拉菜单

function CustomDropdown(props: {
  title: string;
  options: any[];
  onSelect: (value: any) => void;
}) {
  const { title, options, onSelect } = props;

  return (
    <DropdownButton
      size="sm"
      id="custom-dropdown"
      title={title || "Select an Option"}
    >
      {options.map((option: any, index: number) => (
        <Dropdown.Item
          key={index}
          eventKey={option}
          onClick={() => onSelect(option)}
        >
          {option}
        </Dropdown.Item>
      ))}
    </DropdownButton>
  );
}