複数のテキストボックスのｺｰﾄﾞを端的にしたい

Question

お世話になってます。
掲題の件で、今テキストボックスが複数あり
数個なら自分のｺｰﾄﾞで良いかなと思いますが、
数十となるとしんどいため、それを簡潔にできないか
悩んでいます。
お分かりの方居られましたら、
ご教示頂けないでしょうか？
以上、宜しくお願いします。

class App extends Component {
constructor(props){
 super(props);
 this.InsTodo = this.InsTodo.bind(this);
 this.UpdTodo = this.UpdTodo.bind(this);
 this.DelTodo = this.DelTodo.bind(this);
 this.state = {text:"d", text2:"dd", text3:"ddd",};

 this.data = [
      { value: '9to12',  label: '9:00-12:00'  },
      { value: '12to14', label: '12:00-14:00' },
      { value: '14to16', label: '14:00-16:00' },
      { value: '16to18', label: '16:00-18:00' },
      { value: '18to20', label: '18:00-20:00' },
      { value: '20to21', label: '20:00-21:00' },
 ];
}

InsTodo(){ window.alert('Insert');}
UpdTodo(){ window.alert('Update');}
DelTodo(){ window.alert('Delete');}

onChangeSelectValue(e) {
    this.setState({selectValue: e.target.value});
}
render() {
return (
<div className="App">
<form>
<select defaultValue="14to16">
    { this.data.map( d => <option value={d.value}>{d.label}</option>)}
</select>
<p>
<input type="button" value="Ins" onClick={this.InsTodo}/>
<input type="button" value="Upd" onClick={this.UpdTodo}/>
<input type="button" value="Del" onClick={this.DelTodo}/>
</p>
//ここの箇所をスリムにしたい
CST_CD:  <input type="text" value={this.state.text} onChange={(e)=>this.setState({text: e.target.value})}/><br />
CST_NAME:<input type="text" value={this.state.text2} onChange={(e)=>this.setState({text2: e.target.value})}/><br />
TOWN_CD: <input type="text" value={this.state.text3} onChange={(e)=>this.setState({text3: e.target.value})}/><br />
</form>      
</div>
)
}
}
export default App;

Comments

[HayatoKamono]

コード内のインデントがなくなってしまっているので、インデントを直したものに修正頂くことは可能ですか？

[HayatoKamono]

this.state = {text:"d", text2:"dd", text3:"ddd",};　の state部分と、各インプットフィールド（テキストエリア）がどういう関係なのかも補足説明をお願い致します。本当に実際に想定されているコードでは、{text:"d", text2:"dd", text3:"ddd",}のようなコードなのですか？？配列にそれぞれ入れるべきようなものが、１つのオブジェクトでまとまっているので、これだけではかなり違和感があります。テキストエリアとこのstate内のデータの対応関係がどういったものかを説明頂ければクリアになりそうです。CST_CDやCST_NAMEなどの名前は何やら意味がありそうですが、一方で、{text:"d", text2:"dd", text3:"ddd",}のようなものは抽象化されているので、こちらでどういう関係性のものなのかが分かりません。

[Nitta]

返信遅れ申し訳ありません。少し会議の打ち合わせで遅れました。今回のthis.state = {text:"d", text2:"dd", text3:"ddd",};初期値として何かを入ようとしただけで深い意味はありません。またCST_CDなどは実は社員等の出身地情報として付けたｺｰﾄﾞです。最終的には社員等の情報をDB化して種々の管理に役立てる予定です。
返信毎回有難うございます。今後とも宜しくお願いします。

[HayatoKamono]

おっと、質問解決なのですね。それであればオッケーです！データの持ち方など決まっていないと、今回の質問は成立しなそうなので、決まってからの方が良いかもしれませんね。

[Nitta]

おはようございます。素晴らしいｺｰﾄﾞで、大変勉強になります。今後とも宜しくお願いします。

Answer 1

class App extends Component {
	constructor(props){
	 super(props);
	 this.state = {text:"d", text2:"dd", text3:"ddd",};
	}

	render() {
		return (
			<div className="App">
				<form>
					// //ここの箇所をスリムにしたい
					CST_CD:  <input type="text" value={this.state.text} onChange={(e)=>this.setState({text: e.target.value})}/><br />
					CST_NAME:<input type="text" value={this.state.text2} onChange={(e)=>this.setState({text2: e.target.value})}/><br />
					TOWN_CD: <input type="text" value={this.state.text3} onChange={(e)=>this.setState({text3: e.target.value})}/><br />
				</form>      
			</div>
		)
	}
}

export default App;

今回の質問に必要なコードのみを残すと、こうなるという認識で合っていますでしょうか？

this.state = {
	something: [
		{ name: "CST_CD", text:　"d"},	
		{ name: "CST_NAME", text:　"dd"},
		{ name: "TOWN_CD", text:　"ddd"},
	]
};

また、stateの部分ですが、こうではいけない理由は何かありますか？(somethingはproductsなり何らかの実際のキー名）

「質問への追記・修正の依頼」に記載したかったのですが、「質問への追記・修正の依頼」ではコードブロックが適用されないので、一旦、回答欄で失礼いたします。