时间戳

首页 > 解决方案 > 如何从不同的地方调用两个 onClick 事件

javascript - 如何从不同的地方调用两个 onClick 事件

问题描述

我有一个按钮，它将有一个硬编码的 onClick，而另一个使用该组件的按钮可以创建他的自定义 onClick。我不相信这是重复的，因为我能够找到的所有问题都建议以硬编码的方式使用这两个 onClick，在使用 Button 组件时无法更改。

这个组件：

const Button = props => {
  const { children, toggle, ...other } = props;
  const [pressed, setPressed] = useState(true);
  const renderPressedButton = e => {
    setPressed(!pressed);
    onClick(); //here onClick should be called
  };
  return (
    <StyledButton
      toggle={toggle}
      pressed={toggle ? pressed : null}
      onClick={toggle && renderPressedButton}
      {...other}>
      {children}
    </StyledButton>
  );
};

我也在 onClick 事件上尝试过这个功能：

const onClickHandler = () => {
   renderPressedButton();
   onClick();
}

并使用该组件，我将拥有我的自定义 onClick

    const anotherClickHandler = () => {
         console.log('Hey, this is a function outside Button component');
    }

<Button onClick={anotherClickHandler}>Button</Button>

我尝试过的是从第一个 onClick 调用onClick();内部，renderPressedButton但它没有用。第二个 onClick( anotherClickHandler) 被调用，但不是第一个( renderPressedButton)。

我做错了什么？

标签： javascriptreactjs

解决方案

我找到了解决方案。

在主按钮上：

const Button = props => {
  const { onClick } = props; //first i add onClick as a prop
  const [pressed, setPressed] = useState(true);
  const renderPressedButton = () => {
    setPressed(!pressed);
    if (onClick) {//then i check, if theres an onClick, execute it
      onClick();
    }
  };
  return (
    <StyledButton
      pressed={pressed}
      {...props}
      onClick={renderPressedButton}
    />
  );
};

使用按钮时：

<Button onClick={justASimpleOnClickHandler}>Toggle</Button>

这样我可以在使用我的组件时拥有我的主要 onClick 功能和另一个。

推荐阅读