javascript - 如何在 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>