Question

我有一个按钮，该按钮将具有一个经过硬编码的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）被调用，但第一个on {（renderPressedButton）没有被调用。

我做错了什么？

Answer 1

我找到了解决方法。

在主按钮上：

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功能，而在使用组件时可以拥有另一个功能。

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

1 个答案: