[onClick事件在传递参数时触发无限

Question

我已经做了我的第一部分。目标是创建一个简单的下拉列表。每当我添加参数时，click事件都会无限触发：

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)}