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 中： 该函数作为引用传递。这是将函数传递给单击处理程序的正确方法 os，但它会在单击按钮时被调用。但是这种方法的问题是我们在调用函数时不能发送值。

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

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

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

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

onClick event fires infinite when passing a parameter

reactjs

reactstrap