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

Answer 2

[赋予它为]之间有区别>

onClick={ dropDownChanged(10) }

和

onClick={ dropDownChanged }

在情况1：

中，代码的那部分运行后，代码立即调用该函数。即。呈现组件时，将自动调用该函数，这会导致意外的行为。

在情况2：

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

在此用例中的理想解决方案

是将回调函数传递给事件处理程序。

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

单击按钮后，它依次调用回调函数并按预期方式工作。希望这可以澄清事件处理程序的行为！