Question

当我传递通过click事件执行的函数时，它将执行两次。

我已经检查过，当从孩子那里单击时，我无法执行event.preventDefault（），因为它没有作为参数到达。

如何传递函数使其仅运行一次？

父组件
我从父级传递的函数是handleClickSelectPrice

export const FilterForm = ({ display }) => {
  const { priceFilters } = useSelector(selectSearchFilters);
  const dispatch = useDispatch();

  const handleClickSelectPrice = (priceFilter) => {
    priceFilter.isActivated
      ? dispatch(desactivatePriceFilter({ priceFilter: priceFilter.textKey }))
      : dispatch(activatePriceFilter({ priceFilter: priceFilter.textKey }));
  };

  return (
    <>
      <div>
        <Input name='nombre' icon={<MdSearch />} />

        <Select
          options={priceFilters}
          defaultLabel='Ordenar por precio'
          fullWidth
          setOptionSelected={handleClickSelectPrice}
        />
      </div>
    </>
  );
};

子组件
我已经检查过，并且option的{{1}}参数可以正常使用

handleClickOption

Answer 1

请检查您的index.js，您可能需要从那里删除严格模式...

  ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

尝试将其更改为

 ReactDOM.render(
        <App />,
      document.getElementById('root')
    );

将功能传递给子组件

1 个答案: