Блог

Я создал компонент страницы регистрации, который содержит компонент входа и компонент регистрации. Моя проблема в том, как мне передать функцию onClick от родительского элемента к дочернему, чтобы изменить состояние моего родительского компонента (компонента страницы подписи)? Чего я ожидаю, так это того, что, нажав кнопку из дочерних компонентов, можно будет переключить активное состояние родительского компонента и изменить стиль в зависимости от активного состояния. Я пытаюсь передать функцию handleClick от родителя к потомку, но она работает плохо.

Какие-либо решения?

Подробности в codesandbox: https://codesandbox.io/s/wizardly-sanne-rf0u2?file=/src/components/SignIn/SignIn.js

В моем родительском компоненте (Страница входа),

 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>
  );
}
 

В моих дочерних компонентах (вход / Регистрация)

 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;
 

Вы почти на месте, реквизит передается как объект в первом параметре, поэтому для SignIn компонента вы можете использовать деструктурирование, поэтому измените на:

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

Во-первых, props компонент of — это тип объекта.

Итак, если вы хотите получить handleClick дочерний элемент, он должен быть таким, как показано ниже.

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

Во-вторых, при передаче функции дочернему элементу ее не следует вызывать.

например, как показано ниже.

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