今していること
画像のような登録画面にて、リアルタイムで条件を確認し、みたしているか判断するコードをreact.jsを使用して作っている
問題点
①stateのNumberOfPasswordがtrueになった時
=文字が8文字以上入力された時にリアルタイムで画像を切り替える
developper toolで確認する
→8文字以上入力すると、値がtrueになる
→しかし画像は切り替わらない
②文字を8文字以上入力 -> trueになる
しかしそこから文字を消してもtrueのままになっている
よろしくお願いいたします。
また https://codepen.io/mikepro4/full/pvKYZG/ のような挙動を目指しております。
コード
(() => { function PasswordBallon(props){ return ( <div className="passwordBallon"> <ul> <span>Password rules</span> <li> {(() => { if(props.NumberOfPassword == true){ //**ここはreact developperではtrue8文字以上文字を打ち込むとtrueになっている return <img src="../img/check-circle-regular.svg"/> }else{ return <img src="../img/baseline-error_outline-24px.svg"/> } })()} 8 characters minimum </li> <li><img src="../img/baseline-error_outline-24px.svg"/> Contains at least 1 number</li> <li><img src="../img/baseline-error_outline-24px.svg"/> Cant be "password"</li> <li></li> </ul> </div> ); } class App extends React.Component { constructor() { super(); this.state = { display: false, fields: {}, errors: {}, NumberOfPassword: false, }; this.passwordClick = this.passwordClick.bind(this); } passwordClick() { this.setState({ display: true }); } handleChange(field, e){ let errors = {}; let fields = this.state.fields; fields[field] = e.target.value; this.setState({fields}); if(!fields["password"]){ errors["EmptyPassword"] = "Cannot be empty"; } if(typeof fields["password"] !== "undefined"){ //8文字以上打ち込むと、stateの値をtrueに変更 if(fields["password"].match(/^.{8,}$/)){ // formIsValid = false; this.setState({NumberOfPassword: true}); } } } render(){ return( <div className='signup'> <h1>Create Account</h1> <div><input type="text" name="name" placeholder="name"/></div> <div><input type="text" name="email" placeholder="email"/></div> <div className="wrapperPassword"> <input type="text" name="password" placeholder="password" onClick={this.passwordClick} onChange={this.handleChange.bind(this, "password")} value={this.state.fields["password"]} /> { this.state.display ? <PasswordBallon /> : null } </div> <div><input type="text" name="passConfirm" placeholder="confirm password"/></div> </div> ); } }
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。