reactjs中的单选按钮onclick事件

Question

我正在尝试在 ReactJS 中重现滑动效果。 我在 HTML 中有一个单选按钮，当我单击单选按钮时，它会滑动下一个表单。 我的代码包含两种形式，登录和注册。 以下是我所拥有的预览：

 import React, { useState } from "react"; import SignInForm from "./SignInForm"; import SignUpForm from "./SignUpForm"; function Log() { const [registerForm, setRegisterForm] = useState(false); const [loginForm, setLoginForm] = useState(true); const handleForm = (e) => { const loginForm = document.querySelector("form.login"); const loginText = document.querySelector(".title-text .login"); const registerLink = document.querySelector(".signup-link a"); if (e.target.id === "register") { setRegisterForm(true); setLoginForm(false) console.log("work"); // loginForm.style.marginLeft = "-50%"; // loginText.style.marginLeft = "-50%"; } else if (e.target.id === "login") { setLoginForm(true); loginForm.style.marginLeft = "0%"; loginText.style.marginLeft = "0%"; } }; return ( <div className="form-container"> <div className="slide-controls"> <input type="radio" name="slider" id="login" checked /> <input type="radio" name="slider" id="register" /> <label for="login" onClick={handleForm} className="slide login" > Login </label> <label for="register" onClick={handleForm} className="slide register" > Register </label> <div className="slide-tab"></div> </div> <div className="form-inner"> {loginForm && <SignInForm />} {registerForm && <SignUpForm />} </div> </div> ); } export default Log;

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Login | Register</title> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="wrapper"> <div class="title-text"> <div class="title login">Login Form</div> <div class="title login">Sign up Form</div> </div> <div class="form-container"> <div class="slide-controls"> <input type="radio" name="slider" id="login" checked /> <input type="radio" name="slider" id="register" /> <label for="login" class="slide login">Login</label> <label for="register" class="slide register">Register</label> <div class="slide-tab"></div> </div> <div class="form-inner"> <form action="#" class="login"> <div class="field"> <input type="email" name="" placeholder="Email Address" required /> </div> <div class="field"> <input type="password" name="" placeholder="Password" required /> </div> <div class="pass-link"> <a href="#">Forgot Password</a> </div> <div class="field"> <input type="submit" value="Login" /> </div> <div class="signup-link"> Not a member? <a href="#">Sign up now</a> </div> </form> <form action="#" class="register"> <div class="field"> <input type="text" name="" placeholder="Username" required /> </div> <div class="field"> <input type="email" name="" placeholder="Email Address" required /> </div> <div class="field"> <input type="password" name="" placeholder="Password" required /> </div> <div class="field"> <input type="password" name="" placeholder="Confirm Password" required /> </div> <div class="terms"> <input type="checkbox" /> i agree and accept the <a href=""> terms and conditions</a> </div> <div class="field"> <input type="submit" value="Register" /> </div> </form> </div> </div> </div> <script> const loginForm = document.querySelector("form.login"); // const registerForm = document.querySelector("form.register"); const loginBtn = document.querySelector("label.login"); const registerBtn = document.querySelector("label.register"); const registerLink = document.querySelector(".signup-link a"); // const registerText = document.querySelector(".title-text .register"); const loginText = document.querySelector(".title-text .login"); registerBtn.onclick = () => { loginForm.style.marginLeft = "-50%"; loginText.style.marginLeft = "-50%"; }; loginBtn.onclick = () => { loginForm.style.marginLeft = "0%"; loginText.style.marginLeft = "0%"; }; registerLink.onclick = () => { registerBtn.click(); return false; }; </script> </body> </html>

我与反应功能组件一起使用。 我想重现我的 HTML 中的 JavaScript 代码，以便当我单击与注册对应的单选按钮时，它会显示表单注册。 默认情况下，登录是显示在屏幕上的表单。 这就是我正在做的：代码结果

Answer 1

我已经为这个错误反复工作了好几个小时，终于找到了解决我的问题的方法！！！ 我对两个单选按钮都使用了“defaultChecked”。 下面是代码：

 const [registerForm, setRegisterForm] = useState(props.register); const [loginForm, setLoginForm] = useState(props.login); const handleForm = (e) => { // const registerBtn = document.querySelector("label.register"); // const loginBtn = document.querySelector("label.login"); const signInForm = document.querySelector("form.login"); const signInText = document.querySelector(".title-text .login"); if (e.target.id === "register") { setRegisterForm(true); signInForm.style.marginLeft = "-50%"; signInText.style.marginLeft = "-50%"; // setLoginForm(false); } if(e.target.id === "login") { setLoginForm(true); signInForm.style.marginLeft = "0%"; signInText.style.marginLeft = "0%"; // setRegisterForm(false); } };

 <div className="slide-controls"> <input type="radio" name="slider" id="login" defaultChecked={loginForm} onChange={handleForm} /> <input type="radio" name="slider" id="register" defaultChecked={registerForm} onChange={handleForm} /> <label htmlFor="login" className="slide login"> Login </label> <label htmlFor="register" className="slide register"> Register </label> <div className="slide-tab"></div> </div>