在一个按钮组件中使用不同的 onClick 事件的问题

Question

我想让我的组件尽可能地可重用，但是当我开始添加事件时出现了问题。我在我的应用程序的很多地方都使用了一个按钮组件，我只是更改了它的名称。当我将一个 onClick 事件传递给它（更改菜单按钮名称）时它工作正常但是当我想对另一个按钮做同样的事情（更改循环名称）并且当我将第二个 onClick 事件传递给同一个按钮组件时菜单按钮停止工作。我试图找到解决方案，但只找到了不同的主题。我知道我可以在按钮周围制作一个包装器并在包装器上制作 onClick，但我认为我做错了什么，必须有更优雅的方式来处理这个问题。

按钮组件

export const Button = ({text, changeButtonName, changeCycle}) => {

  return (
    <AppButton onClick={changeButtonName, changeCycle}>
      {text}
    </AppButton>
  );
};

放置循环和菜单按钮的导航栏组件

export const Navbar = () => {

  const menuButton = 'Menu';
  const closeButton = 'Zamknij';

  const [menuButtonName, setMenuButtonName] = useState(menuButton);

  const changeButtonName = () => {
    menuButtonName === menuButton ? setMenuButtonName(closeButton) : setMenuButtonName(menuButton);
  }

  const interiorButton = 'Interior →';
  const structuralCollageButton = 'Structural Collage →';

  const [cycleButtonName, setCycleButtonName] = useState(interiorButton);

  const changeCycle = () => {
    cycleButtonName === interiorButton ? setCycleButtonName(structuralCollageButton) : setCycleButtonName(interiorButton);
  }

  return (
    <Nav>
      <AuthorWrapper>
        <AuthorName>
          Michał Król
        </AuthorName>
        <AuthorPseudonym>
          Structuralist
        </AuthorPseudonym>
      </AuthorWrapper>
      <CycleButtonWrapper >
        <Button text={cycleButtonName} changeCycle={changeCycle} />
      </CycleButtonWrapper>
      <MenuButtonWrapper>
        <Button text={menuButtonName} changeButtonName={changeButtonName} />
      </MenuButtonWrapper>
    </Nav>
   )
}

Answer 1

像

一样更新您的代码

<AppButton onClick={()=> {
  changeButtonName && changeButtonName();
  changeCycle && changeCycle();
 }}>
  {text}
</AppButton>

Answer 2

您不能将两个函数传递给 onClick。要么进行条件检查以调用传递的函数，要么创建包装函数。

export const Button = ({text, changeButtonName, changeCycle}) => {

  return (
    <AppButton onClick={changeButtonName || changeCycle}>
      {text}
    </AppButton>
  );
};

或

export const Button = ({text, changeButtonName, changeCycle}) => {

  return (
    <AppButton
        onClick={() => {
          changeButtonName && changeButtonName();
          changeCycle && changeCycle();
        }
    }>
      {text}
    </AppButton>
  );
};

Answer 3

这不是一个真正可重用的 Button 方法。对于每个新方法名称，您都必须将其包含在 props 参数中，并且您可能会遇到类似的情况：

export const Button = ({text, changeButtonName, changeCycle, changeTheme, changeDisplay})

使其可重用的正确方法是仅将一个处理程序传递给您的按钮：

export const Button = ({text, clickHandler}) => {

  return (
    <AppButton onClick={clickHandler}>
      {text}
    </AppButton>
  );
};

fwiw，你遇到问题的原因是因为在这段代码 onClick={changeButtonName, changeCycle} 中你传递了多个带有 comma operator 的表达式，其中返回了最后一个操作数。

在一个按钮组件中使用不同的 onClick 事件的问题

Problem with using different onClick events in one button component

reactjs

react-props

react-component

react-hooks