今していること --- react.jsを使用しリアルタイムでバリデーションチェックする登録画面を作っております ![イメージ説明](b4abf6d9fe5c5e99ed9afe1aeaf3bc1a.png) 問題点 --- パスワードの値をチェックする際に３つ条件を見る　→そこでの子コンポーネントに渡す値をまとめることはできないのか？　と疑問にコード(コード内に質問は書きました) --- ``` function PasswordBallon(props){ return (

{props.NumberOfPassword}

Password rules

//**①以下の条件分岐を短くできないか？ {(() => { if(props.NumberOfPassword == true){ return 　}else{ return 　} })()} {(() => { if(props.NumberOfPassword == true){ return 8 characters minimum 　}else{ return 8 characters minimum 　} })()}
{(() => { if(props.CheckNumber == true){ return 　}else{ return 　} })()} {(() => { if(props.CheckNumber == true){ return Contains at least 1 number 　}else{ return Contains at least 1 number 　} })()}
{(() => { if(props.CheckCharacter == true){ return 　}else{ return 　} })()} {(() => { if(props.CheckCharacter == true){ return Can't be "password", "username" 　}else{ return Can't be "password", "username" 　} })()}

); } class App extends React.Component { constructor() { super(); this.state = { display: false, fields: {}, errors: {}, NumberOfPassword: false, CheckNumber: false, CheckCharacter: 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"]){ // formIsValid = false; errors["EmptyPassword"] = "Cannot be empty"; } if(typeof fields["password"] !== "undefined"){ if(fields["password"].match(/^.{8,}$/)){ // formIsValid = false; this.setState({NumberOfPassword: true}); }else{ this.setState({NumberOfPassword: false}); } if(fields["password"].match(/[0-9]/)){ // formIsValid = false; this.setState({CheckNumber: true}); }else{ this.setState({CheckNumber: false}); } if(fields["password"] != ("password" || "user")){ this.setState({CheckCharacter: true}); }else{ this.setState({CheckCharacter: false}); } } } ////component名は最初大文字な** render(){ return(

Create Account

{ this.state.display ? : null }

); } } ReactDOM.render( , document.getElementById('wrapper') ); })(); ``` よろしくお願いいたします。

	@@ -1 +1 @@
1	- (react.js) 子コンポーネントに渡す値をまとめられないか？？
1	+ 「react.js」子コンポーネントに渡す値をまとめられないか？？

質問編集履歴