從 React 中的子功能組件更改父組件 State

Question

我創建了一個簽名頁面組件，其中包含登錄組件和注冊組件。 我的問題是如何將 onClick function 從父級傳遞給子級，以便更改父組件的 state（簽名頁面組件）？ 我期望的是，通過單擊子組件中的按鈕，可以切換父組件的活動 state，並且可以根據活動的 state 更改樣式。 我正在嘗試將 handleClick function 從父級傳遞給子級，但效果不佳。

有什么解決辦法嗎？

代碼框中的詳細信息： https://codesandbox.io/s/wizardly-sanne-rf0u2?file=/src/components/SignIn/SignIn.js

在我的父組件（SignPage）中，

function SignPage() {
  const [active, setActive] = useState(false);
  const handleClick = () => {
    setActive(!active);
  };

return (
    <div className="sign-container">
      <div
        className={active ? "sign-wrapper s-signup" : "sign-wrapper"}
      >
        <SignIn handleClick={handleClick} />
        <SignUp handleClick={handleClick} />
      </div>
    </div>
  );
}

在我的子組件中 (SignIn / SignUp)

import React, { useState } from "react";
import "./SignIn.css";

function SignIn(handleClick) {
  return (
    <div className="sign-in-container">
      <form className="sign-form sign-in">
        <h2>Sign In</h2>
        <label htmlFor="email">
          <span>Email Address</span>
          <input type="email" name="email" />
        </label>
        <label htmlFor="password">
          <span>Password</span>
          <input type="password" name="password" />
        </label>
        <button className="submit" type="submit">
          Sign In
        </button>

        <p className="panel-switcher" onClick={handleClick()}>
          Don't have an account?
        </p>
      </form>
    </div>
  );
}

export default SignIn;

Answer 1

您快到了，道具在第一個參數中作為 object 傳遞，因此對於SignIn組件，您可以使用解構，因此更改為：

function SignIn({ handleClick }) {
   // code...
   // Remove the () from `handleClick()` as that will immediately execute the function.
   <p className="panel-switcher" onClick={handleClick}>
}

Answer 2

首先，組件的props是object類型。

所以，如果你想在 child 中獲取handleClick ，它應該如下所示。

function SignIn({ handleClick }) {
  // ...
}

其次，當處理一個 function 給孩子時，它不應該被調用。

例如，如下所示。

<p className="panel-switcher" onClick={handleClick}>