传递参数时，onClick 事件会无限触发

Question

我已经制作了我的第一个组件。目标是创建一个简单的下拉菜单。每次我添加参数时，都会无限触发点击事件：

onClick={dropDownChanged(10)}

如果我像下面这样调用它，则单击时会触发该事件，但是我没有得到所需的值：

onClick={dropDownChanged}

如何传递我的值，以便使用所选值更新下拉列表？我也尝试不使用箭头函数，而是使用相同的行为。

import React, { useState } from "react";
import {
  Dropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem,
  Button
} from "reactstrap";

const DropdownPaging = props => {
  const [dropdownOpen, setDropdownOpen] = useState(false);
  const toggle = () => setDropdownOpen(prevState => !prevState);

  const dropDownChanged = val => {
    alert("ff");
  };

  return (
    <div>
      <table>
        <tr>
          <td>
            <Button outline color="dark">
              &lt;
            </Button>
          </td>
          <td>
            <Button outline color="dark">
              &gt;
            </Button>
          </td>
          <td>
            <Dropdown isOpen={dropdownOpen} toggle={toggle}>
              <DropdownToggle caret outline color="dark">
                10
              </DropdownToggle>
              <DropdownMenu>
                <DropdownItem onClick={dropDownChanged}>10</DropdownItem>
                <DropdownItem onClick={dropDownChanged}>25</DropdownItem>
                <DropdownItem onClick={dropDownChanged}>50</DropdownItem>
                <DropdownItem onClick={dropDownChanged}>100</DropdownItem>
              </DropdownMenu>
            </Dropdown>
          </td>
        </tr>
      </table>
    </div>
  );
};

export default DropdownPaging;

Answer 1

像这样传入函数

onClick={() => dropDownChanged(10)}

Answer 2

把它当做是有区别的

onClick={ dropDownChanged(10) }

和

onClick={ dropDownChanged }

在案例 1： 运行该部分代码后，代码立即调用该函数。 IE。渲染组件时，会自动调用该函数，从而导致意外行为。

案例 2： 函数作为引用传递。这是将函数传递给单击处理程序的正确方法，但是单击按钮时将调用它。但是这种方法的问题是我们在调用函数时无法发送值。

此用例中的理想解决方案是将回调函数传递给事件处理程序。

即。 onClick={() => dropDownChanged(10)}

当按钮被点击时，它又会调用回调函数并按预期工作。希望这可以澄清事件处理程序的行为！