React v16のローカル.jsonファイルのデータを使用して、選択メニュー「オブジェクトタイプ」の値に基づいて選択メニュー「オブジェクトサブタイプ」のコンテンツを変更しようとしています
例：選択メニューの「オブジェクトタイプ」で植物を選択すると、選択メニューの「オブジェクトサブタイプ」にアロエ、サボテン、ローズが表示されます。
私は data.json
{
"object": [
{
"objectType": "Plant",
"objectSubtype": ["Aloe","Cactus","Rose"]
},
{
"objectType": "Animal",
"objectSubtype": ["Cat","Dog","Dolphin"]
},
{
"objectType": "Stone",
"objectSubtype": ["Granite","Marble","Travertine"]
}
]
}
そして、私が持っています Object.js
import React, { Component } from "react";
class Object extends Component {
constructor() {
super();
this.state = {
objectType: "",
objectSubtype: ""
};
this.onChange = this.onChange.bind(this);
}
onChange(e) {
this.setState({ [e.target.name]: e.target.value });
}
render() {
return (
<form>
<div className="form-group">
<select
id="objectType"
multiple={false}
className="form-control"
value={this.state.objectType}
onChange={this.onChange}
>
<option>Select an object type</option>
</select>
</div>
<div className="form-group">
<select
id="objectSubtype"
multiple={false}
className="form-control"
value={this.state.objectSubtype}
onChange={this.onChange}
>
<option>Select an object subtype</option>
</select>
</div>
</form>
);
}
}
export default Object;
私の目標は、ローカルファイルdata.jsonのデータを使用して、選択メニュー「オブジェクトタイプ」の値に基づいて、両方の選択メニューにデータを入力し、2番目の選択メニュー「オブジェクトサブタイプ」にデータを入力することです。どうしてそれは可能ですか？
最初の「objectType」を選択するには、次のようなオプションを設定します
let objectOption = []
data.object.forEach(x=>objectOption.push(x.objectType))
これをループして、最初に[オプション]を選択します。この選択から値を変更するときは、2番目の状態変数（objectSubtype）を設定する必要があります
そのために、onChangeHandlerを最初のSelectに渡し、ここから2番目の状態も設定できます。
onObjectChange = (value) => {
// TODO: handle for null value as well
let subTypeValue = data.object.filter(x=>x.objectType===value)[0].objectSubtype
this.setState({objectType:value, objectSubtype:subTypeValue})
}
2番目のSelectは、独自のonChangeHandlerを持つことができます。これは、次のように単純にすることができます。
onSubObjectChange = (value) => {
this.setState({objectSubtype:value})
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加