#reactjs
#reactjs
Вопрос:
Я создал компонент страницы регистрации, который содержит компонент входа и компонент регистрации. Моя проблема в том, как мне передать функцию 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;
Ответ №1:
Вы почти на месте, реквизит передается как объект в первом параметре, поэтому для SignIn
компонента вы можете использовать деструктурирование, поэтому измените на:
function SignIn({ handleClick }) {
// code...
// Remove the () from `handleClick()` as that will immediately execute the function.
<p className="panel-switcher" onClick={handleClick}>
}
Ответ №2:
Во-первых, props
компонент of — это тип объекта.
Итак, если вы хотите получить handleClick
дочерний элемент, он должен быть таким, как показано ниже.
function SignIn({ handleClick }) {
// ...
}
Во-вторых, при передаче функции дочернему элементу ее не следует вызывать.
например, как показано ниже.
<p className="panel-switcher" onClick={handleClick}>