Q&A
inputのnameにも onChange={this.handleChange.bind(this, "name")} を追加。
結果、入力はできるようになりましたが、if(typeof fields["password"] != '')のif文内をnameの場合でも通ってしまいますね。。。
今していること
react.jsを使用し画像のようなリアルタイムで条件をクリアしているか見れる、登録フォームを作成中
問題点
nameとpasswordのinput部分をclick → それ以外のどこかをclickすると
A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.
のエラーが出る
→https://stackoverflow.com/questions/47012169/a-component-is-changing-an-uncontrolled-input-of-type-text-to-be-controlled-erro
を参考にstateを
fields: {} から fields: {name: '', password: ''} に変更
エラーは出なくなったがnameのtext内に文字が打ち込めなくなってこまっております
コード
function PasswordBallon(props){ return ( <div className="passwordBallon"> <ul> <span className="title">Password rules</span> <li> {(() => { if(props.NumberOfPassword == true){ return <img src="../icon/check-solid.svg" style={{height:"22px"}}/> }else{ return <img src="../icon/baseline-error_outline-24px.svg" /> } })()} {(() => { if(props.NumberOfPassword == true){ return <span style={{color:"#E4E7E8"}}> 8 characters minimum</span> }else{ return <span> 8 characters minimum</span> } })()} </li> <li> {(() => { if(props.CheckNumber == true){ return <img src="../icon/check-solid.svg" style={{height:"22px"}}/> }else{ return <img src="../icon/baseline-error_outline-24px.svg" /> } })()} {(() => { if(props.CheckNumber == true){ return <span style={{color:"#E4E7E8"}}> Contains at least 1 number</span> }else{ return <span> Contains at least 1 number</span> } })()} </li> <li> {(() => { if(props.CheckCharacter == true){ return <img src="../icon/check-solid.svg" style={{height:"22px"}}/> }else{ return <img src="../icon/baseline-error_outline-24px.svg" /> } })()} {(() => { if(props.CheckCharacter == true){ return <span style={{color:"#E4E7E8"}}> Can't be "password", "username"</span> }else{ return <span> Can't be "password", "username"</span> } })()} </li> </ul> </div> ); } function FormButton(props){ return( <div> <button // onClick={this._sendData} // disabled={props.errors} disabled={props.errors} > submit </button> </div> ); } class App extends React.Component { constructor() { super(); this.state = { display: false, fields: {name: '', password: ''}, //https://stackoverflow.com/questions/47012169/a-component-is-changing-an-uncontrolled-input-of-type-text-to-be-controlled-erro errors: {}, buttonDisabled: true, PassConfirmDisabled: true, NumberOfPassword: false, CheckNumber: false, CheckCharacter: false, }; this.passwordClick = this.passwordClick.bind(this); this.handleChange = this.handleChange.bind(this); this.clickOutside = this.clickOutside.bind(this); } passwordClick() { this.setState({ display: true }); } handleChange(field, e){ let fields = this.state.fields; fields[field] = e.target.value; this.setState({fields}); if(typeof fields["password"] != ""){ if(fields["password"].match(/^.{8,}$/)){ this.setState({NumberOfPassword: true}); }else{ this.setState({NumberOfPassword: false}); } if(fields["password"].match(/[0-9]/)){ this.setState({CheckNumber: true}); }else{ this.setState({CheckNumber: false}); } if((fields["password"] != "password")&&(fields["password"] !="username")&&(fields["password"] !="")){ this.setState({CheckCharacter: true}); }else{ this.setState({CheckCharacter: false}); } if(this.state.NumberOfPassword == true && this.state.CheckNumber == true && this.state.CheckCharacter == true){ this.setState({PassConfirmDisabled: false}) }else{ this.setState({PassConfirmDisabled: true}) } } } clickOutside(field, e){ let fields = this.state.fields; fields[field] = e.target.value; this.setState({fields}); if(typeof fields["name"]){ if(fields["name"].trim() === ""){ this.setState({ errors: "name is empty" }); } } if(typeof fields["password"]){ this.setState({ display: false }); } } render(){ return( <div className='signup'> <h1>Create Account</h1> <div> <input type="text" name="name" placeholder="name" value={this.state.fields["name"]} onBlur={this.clickOutside.bind(this, "name")} /> </div> <div><input type="text" name="email" placeholder="email"/></div> <div className="wrapperPassword"> <input type="password" name="password" placeholder="password" value={this.state.fields["password"]} onClick={this.passwordClick} onChange={this.handleChange.bind(this, "password")} onBlur={this.clickOutside.bind(this, "password")} /> { this.state.display ? <PasswordBallon NumberOfPassword = {this.state.NumberOfPassword} CheckNumber = {this.state.CheckNumber} CheckCharacter = {this.state.CheckCharacter} />: null } </div> <div><input type="text" name="passConfirm" placeholder="confirm password" disabled={this.state.PassConfirmDisabled}/></div> <FormButton errors={this.state.errors}/> </div> ); } } ReactDOM.render( <App/>, document.getElementById('wrapper') ); })();
よろしくお願いいたします。
回答2件
0
onBlurのイベントハンドラーclickOutsideのevent処理で、tagerを利用していますが、
FocusEventのプロパティにtargetはないので、それが悪さをしている気がしますね。
e.relatedTarget.valueで取り出すとどうでしょうか？
投稿2018/08/22 01:08
総合スコア715
0
ベストアンサー
Reactからvalueを埋め込む場合、それはControlled Component（Reactから値の制御を行うエレメント）という扱いになって、onChangeで変更後の値を拾ってstateやprops経由で反映させる処理が必要となります。そうしないと、入力不能となります。
投稿2018/08/22 00:54
総合スコア146018
handleChangeでfieldsを破壊的に変更しているのも気になりますね。「let fields = {...this.state.fields};」のようにコピーを作成してみたらどうなりますでしょうか。
ありがとうございます。
また例えばinputのemail部分を、onBlur時のみに条件をクリアしているか見て、エラー文を出そうとする場合もonChangeを設定し、関数を作らなければならないのでしょうか？？(でないてinput内に文字を入力できない)
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/08/22 12:58