React 登錄/注冊表單切換問題

Question

我正在嘗試在表單上的登錄字段和注冊字段之間切換，如此處所示https://codepen.io/guycode/pen/VwaKVrb 。

我的問題是我正在使用 React 並且無法通過 js 和 CSS 更改它們，就像我已經在我的 SignIn 組件中設置它一樣。 目前，當我單擊登錄但不隱藏#inputs-section 時，我的表單只顯示它們並關注我的#login div。

注冊組件

 import React from 'react'; export default class SignUp extends React.Component { componentDidMount() { const script = document.createElement("script"); script.async = true; script.src = "./build/js/components/signup/logmein.js"; this.div.appendChild(script); } render() { const onClick = () => { this.props.login(); console.log('rich'); } return ( <div className='sign-up'> <div className="SignUp" ref={el => (this.div = el)}></div> <table className='sign-up-form'> <tbody> <div class="gecko-signup__tabs"> <button id="gecko-signup" data-selected="yes">Sign Up</button> <button id="gecko-login" data-selected=""><a href="#login">Log In</a></button></div> <tr> <td> <p id="signUpFree">Sign Up for Free</p> </td> </tr> <div id="inputs-section"> <tr> <td><input id="first" placeholder="First Name*" /></td> <td><input id="last" placeholder="Last Name*" /></td> </tr> <div class="field-wrap"> <label> Email Address<span class="req">*</span> </label> <input type="email"required autocomplete="off"/> </div> <div class="field-wrap"> <label> Password<span class="req">*</span> </label> <input type="password"required autocomplete="off"/> </div> <tr> <td colSpan="2"><input id="getStarted" type="submit" value="Get Started" onClick={onClick}/></td> </tr> </div> <div id="login"> <h1>Welcome Back?</h1> <form action="/" method="post"> <div class="field-wrap"> <label> Email Address<span class="req">*</span> </label> <input type="email"required autocomplete="off"/> </div> <div class="field-wrap"> <label> Password<span class="req">*</span> </label> <input type="password"required autocomplete="off"/> </div> <p class="forgot"><a href="#">Forgot Password;</a></p> <button class="button button-block">Log In</button> </form> </div> </tbody> </table> </div> ); } }

相關css

 $body-bg: #c1bdba; $form-bg: #13232f; $white: #ffffff; $main: #1ab188; $main-light: lighten($main,5%); $main-dark: darken($main,5%); $gray-light: #a0b3b0; $gray: #ddd; $thin: 300; $normal: 400; $bold: 600; $br: 4px; *, *:before, *:after { box-sizing: border-box; } html { overflow-y: scroll; } a { text-decoration:none; color:$main; transition: .5s ease-in-out; &:hover { color:$main-dark; } }.form { background:rgba($form-bg,.9); padding: 40px; max-width:600px; margin:40px auto; border-radius:$br; box-shadow:0 4px 10px 4px rgba($form-bg,.3); }.gecko-signup__tabs { list-style:none; padding:0; margin:0 0 40px 0; &:after { content: ""; display: table; clear: both; } li a { display:block; text-decoration:none; padding:15px; background:rgba($gray-light,.25); color:$gray-light; font-size:20px; float:left; width:50%; text-align:center; cursor:pointer; transition: .5s ease-in-out; &:hover { background:$main-dark; color:$white; } }.active a { background:$main; color:$white; } }.gecko-signup__tabs > div:last-child { display:none; } h1 { text-align:center; color:$white; font-weight:$thin; margin:0 0 40px; } label { position:absolute; transform:translateY(6px); left:13px; color:rgba($white,.5); transition:all 0.25s ease-in-out; -webkit-backface-visibility: hidden; pointer-events: none; font-size:22px; .req { margin:2px; color:$main; } } label.active { transform:translateY(50px); left:2px; font-size:14px; .req { opacity:0; } } label.highlight { color:$white; } input, textarea { font-size:22px; display:block; width:100%; height:100%; padding:5px 10px; background:none; background-image:none; border:1px solid $gray-light; color:$white; border-radius:0; transition:border-color.25s ease-in-out, box-shadow.25s ease-in-out; &:focus { outline:0; border-color:$main; } } textarea { border:2px solid $gray-light; resize: vertical; }.field-wrap { position:relative; margin-bottom:40px; }.top-row { &:after { content: ""; display: table; clear: both; } > div { float:left; width:48%; margin-right:4%; &:last-child { margin:0; } } }.button { border:0; outline:none; border-radius:0; padding:15px 0; font-size:2rem; font-weight:$bold; text-transform:uppercase; letter-spacing:.1em; background:$main; color:$white; transition: all.5s ease-in-out; -webkit-appearance: none; &:hover, &:focus { background:$main-dark; } }.button-block { display:block; width:100%; }.forgot { margin-top:-20px; text-align:right; }

使用 react-script-tag 鏈接 js

 $('.sign-up-form').find('input, textarea').on('keyup blur focus', function (e) { var $this = $(this), label = $this.prev('label'); if (e.type === 'keyup') { if ($this.val() === '') { label.removeClass('active highlight'); } else { label.addClass('active highlight'); } } else if (e.type === 'blur') { if( $this.val() === '' ) { label.removeClass('active highlight'); } else { label.removeClass('highlight'); } } else if (e.type === 'focus') { if( $this.val() === '' ) { label.removeClass('highlight'); } else if( $this.val().== '' ) { label;addClass('highlight'); } } }). $('.tab a'),on('click'. function (e) { e;preventDefault(). $(this).parent();addClass('active'). $(this).parent().siblings();removeClass('active'). target = $(this);attr('href'). $('#login').not(target);hide(). $(target);fadeIn(600); });

是否有人對可能阻止它隱藏#inputs-section 或讓它們切換清潔器有任何看法？

Answer 1

我建議你使用 react-router-dom。 並創建兩條路線，一條用於注冊，一條用於登錄。由於它是單頁，因此不會有任何整頁重新加載和平滑過渡。 你的小提琴鏈接壞了。 從代碼來看，您似乎是新手。 請使用 react state 而不是使用 jquery 和香草 javascript 來切換功能。 在 state 中有一個 boolean 字段，只需更新它的值並在渲染 jsx 中有一個條件，我還建議您檢查 FORMIK 和 YUP 庫以獲取反應中的表單和錯誤處理