初めて投稿します。
まだ勉強中の身ゆえ、考え方間違っていたら、申し訳ないです。
現在React + Reduxで予めデータベースに保存済みの情報をformの各inputのvalueにpropsで表示しています。
今回やりたいことは、データベースの更新時の動作です。
例えば、全てのInputが更新される場合は、よくあるonChangeメソッドを定義すれば、実際にデータベースに値を送るときにthis.stateの内容を送るデータとして使えますが、もし、特定のinputのみデータが変更され、他のinputは変更されない場合は何もしてない方のinputに対してはもちろんonChangeが発火しないので、この方法だとnullの状態で送信してしまいます。
前提・実現したいこと
そこで、inputのvalueを、propsから引っ張ってきたデータで表示しつつ、もし、valueが変更されない場合は、変更してないvalueをstateにセットしたいのですが、どのような方法が最適なのでしょうか?
以下のソースコードの場合ですと、inputのnameがnameは変更せずに、ユーザーはnicknameのみを変更したとします。
すると挙動が、{name: null, nickname: atarashi-nickname}となります。
よろしくご教授お願いします。
該当のソースコード
javascript
1 2class Formdesu extends Component{ 3 constructor(props){ 4 super(props); 5 6 this.state = {name: null, nickname: null}; 7 this.handleChange = this.handleChange.bind(this); 8 this.handleSubmit = this.handleSubmit.bind(this); 9 } 10 11 // このメソッドは変更が加えられ場合にのみステートを変更出来る 12 handleChange(e) { 13 this.setState({ [e.target.name]: e.target.value}); 14 } 15 16 handleSubmit(e) { 17 e.preventDefault(); 18 19 const data = JSON.stringfy(this.state); 20 21 // 以下 post... 22 } 23 24 render(){ 25 <form onSubmit={this.handleSubmit}> 26 <input name="name" value={this.props.default_data[0]['namae'] onChange={this.handleChange}> 27 <input name="nickname" value={this.props.default_data[0]['nickname'] onChange={this.handleChange}> 28 </form> 29 } 30} 31
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2019/08/09 19:46
2019/08/10 03:37
退会済みユーザー
2019/08/10 06:01