reactjs 如何在React组件上添加onClick事件，并将其作为 prop 传递给另一个组件

zour9fqk 于 2023-08-04 发布在 React

关注(0)|答案(1)|浏览(98)

我正在尝试创建一个trigger组件，可以将其传递给另一个组件。我希望能够从接收组件在trigger组件上添加一个click事件。
这里有一个Playground：https://stackblitz.com/edit/react-ts-xxmz6h?file=index.tsx
这就是我所尝试的
代码

const ComponentA = ({ children, Trigger }: Props): JSX.Element => {
  const [show, setShow] = useState<boolean>(false);
  return (
    <div>
      <Trigger
        onClick={(): void => {
          console.log('click');
          setShow(true);
        }}
      />
      {show && children}
    </div>
  );
};

const ComponentB = (): JSX.Element => {
  return <button>Click me</button>;
};

<ComponentA Trigger={ComponentB}>
  <div>it worked</div>
</ComponentA>

字符串
我希望在单击渲染按钮时记录click并更新状态。这反过来又会让孩子们

reactjs

来源：https://stackoverflow.com/questions/76817708/how-to-add-an-onclick-event-on-a-react-component-that-is-passed-down-to-another

1条答案

按热度按时间

k10s72fa1#

您将onClick prop 传递给ComponentB，但忘记将onClick prop 传递给<button>组件。参见Responding to Events

import React from 'react';

const ComponentB = ({ onClick }): JSX.Element => {
  return <button onClick={onClick}>Click me</button>;
};

export default ComponentB;

字符串
stackblitz的

赞(0）回复(0）举报 2023-08-04

我来回答

reactjs 如何在React组件上添加onClick事件，并将其作为 prop 传递给另一个组件

1条答案

相关问题

热门标签

最新问答