[英]ReactJs: need to change Card into another card onClick
here is my goal: There is a "Newuser" button in Login card and it will be clicked, the card will be changed into Register.这是我的目标:登录卡中有一个“新用户”按钮,点击它,卡将变为注册。 Login card will be gone.
登录卡将消失。 All i have done in material-UI.
我在 material-UI 中所做的一切。
my codein codesand我在代码和代码中的代码
when i click on the button it shows error.当我单击按钮时,它显示错误。 if i make this button outside the card i can use if-else condition to show the desired card.
如果我在卡片外面制作这个按钮,我可以使用 if-else 条件来显示所需的卡片。 but i should keep the button inside the Login form.
但我应该将按钮保留在登录表单中。
while i press the Newuser button, it is saying to use the children array.当我按下 Newuser 按钮时,它是说使用 children 数组。 how can i solve that?
我该如何解决? thanx in advance
提前谢谢
You could pass a function from your parent to your child as a prop, which will setState a boolean to change the displayed card.您可以将 function 作为道具从您的父母传递给您的孩子,这将设置状态为 boolean 以更改显示的卡片。 This way the button stay in your child.
这样,按钮就会留在您的孩子身上。
Since you have two cards and you want to switch between them - you need someone to handle which of them to show (it will probably be the container of them).由于您有两张卡片并且您想在它们之间切换 - 您需要有人来处理要显示的卡片(它可能是它们的容器)。
You can use a state to control which card to show, and based on that state to switch between them:您可以使用 state 来控制要显示的卡,并基于 state 在它们之间切换:
const [isLogin, setIsLogin] = useState(true);
const handleRegister = () => {
setIsLogin(false);
}
And inside the login card - when you click on the "register" button just call the handleRegister
function.在登录卡内 - 当您点击“注册”按钮时,只需调用
handleRegister
function。
Your login card will need to get the handleRegister
function in order to call it while the button inside is being pressed:您的登录卡需要获取
handleRegister
function 以便在按下内部按钮时调用它:
<Login user={user} setUser={setUser} handleRegister={handleRegister} />
And you will need to decide which element to show (the login or the register) based on the value of the isLogin
variable:您需要根据
isLogin
变量的值来决定显示哪个元素(登录名或寄存器):
{isLogin ? <Login user={user} setUser={setUser} handleRegister={handleRegister} /> : <Register />}
Here is a working example: https://codesandbox.io/s/happy-moore-8miyc?file=/src/Login.js这是一个工作示例: https://codesandbox.io/s/happy-moore-8miyc?file=/src/Login.js
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.