React：如何在“onClick”事件上觸發一個函數，但在一個組件上？

Question

當我點擊我的Trash組件時，我嘗試觸發handleClick函數，但它不起作用，因為Trash不是 DOM 對象。 單擊此組件時如何觸發我的功能？

const handleClick = () => {
    console.log('OK');
  }

  return (
    <div className="comment">
      {trash && <Trash comment={comment} onClick={handleClick} />
    </div>
  );

Answer 1

您需要更改 Trash 組件以接受onClick道具，並將其傳遞給返回的 JSX。 就像是：

const Trash = (props) => {
  // ...
  return (
    // whatever the top level element here is,
    // add the onclick prop to it
    <div onClick={props.onClick}>
      // ...
    </div>
  );
};