React Js选择输入地址映射

Question

如何将包含地址不同属性的json文件映射到不同的反应选择列表中？

Answer 1

因此，首先需要创建select处理程序，然后映射函数中的数据"组件WillMount"；以及"；ComponentWillReceiveProps"；然后添加带有映射选项的select输入。

如需帮助，请联系我。

JSON文件这是我处理的JSON文件中的几行。[{"id"："1"，"gouvernorat"："阿里亚娜"，"代表团"："Ariana Ville"，"localite"："Cite Borj Turki 2"，"codePostal"："2058"}，{"id"："2"，"gouvernorat"："阿里亚娜"，"代表团"："Ariana Ville"，"localite"："El Menzah 8"，"codePostal"："2037"}，{"id"："3"，"gouvernorat"："阿里亚娜"，"代表团"："Ariana Ville"，"localite"："Cite Du Printemps"，"codePostal"："2080"}，{"id"："4"，"gouvernorat"："Ariana"，"代表团"："阿里安娜·维尔"，"localite"："Cite Des Roses"，"codePostal"："2080"}，{"id"："5"，"gouvernorat"："阿里亚娜"，"代表团"："Ariana Ville"，"localite"："Residence Ennour(Naser 2("，"codePostal"："2037"}，{"id"："6"，"gouvernorat"："阿里亚娜"，"代表团"："Ariana Ville"，"localite"："El Menzah 6"，《邮政编码》："2091"}，{"id"："7"，"gouvernorat"："阿里亚娜"，"代表团"："Ariana Ville"，"localite"："Cite Ennasr 1"，"codePostal"："2037"}，]

选择处理程序

SelectgouvernoratHandler = (selectedOptions) => {
const gouvernorat = selectedOptions;
this.setState({ gouvernorat: gouvernorat.label });
};  

SelectDelegationHandler = (selectedOptions) => {
const del = selectedOptions;
this.setState({ delegation: del.value.delegation });
};
SelectLocaliteHandler = (selectedOptions) => {
const localite = selectedOptions;
this.setState({ localite: localite.value.localite });

};
SelectCodePostalHandler = (selectedOptions) => {
const codePostal = selectedOptions;
this.setState({ codePostal: codePostal.value.codePostal });
};

独特的对象功能

getUnique(arr, index) {
const unique = arr
.map(e => e[index])

// store the keys of the unique objects
.map((e, i, final) => final.indexOf(e) === i && i)

// eliminate the dead keys & store unique objects
.filter(e => arr[e]).map(e => arr[e]);      

return unique;
}

组件WillMount

const gouvernoratData = [];
const gouvernoratS = [...Adresse];
gouvernoratS.map((ad)=>{
return gouvernoratData.push({
value : ad.gouvernorat,
label: ad.gouvernorat
})
})
this.setState({gouvernoratS: gouvernoratData })

const LocaliteData = [];
const localiteS = [...Adresse];
localiteS.map((ad)=>{
return LocaliteData.push({
value : ad,
label: ad.localite
})
})
this.setState({localiteS: LocaliteData })
const delegationData = [];
const delegationS = [...Adresse];
delegationS.map((ad)=>{
return delegationData.push({
value : ad,
label: ad.delegation
})
})
this.setState({delegationS: delegationData })

const CodePostalData = [];
const codePostalS = [...Adresse];
codePostalS.map((ad)=>{
return CodePostalData.push({
value : ad,
label: ad.codePostal
})
})
this.setState({codePostalS: CodePostalData })

组件WillReciveProps

//政府

if (this.state.gouvernoratS) {
const mappedGouv = this.state.gouvernoratS.map(
(ad) => {
return {
value: ad.value,
label: ad.label,
};
}
);
this.setState({ gouvernorat: mappedGouv });
}
//delegation
if (this.state.delegationS) {
const mappedDel = this.state.delegationS.map(
(ad) => {
return {
value: ad.value,
label: ad.label,
};
}
);
this.setState({ delegation: mappedDel });
}
///localite
if (this.state.localiteS) {
const mappedLoc = this.state.localiteS.map(
(ad) => {
return {
value: ad.value,
label: ad.label,
};
}
);
this.setState({ localite: mappedLoc });
}
//code postal
if (this.state.codePostalS) {
const mappedCP = this.state.codePostalS.map(
(ad) => {
return {
value: ad.value,
label: ad.label,
};
}
);
this.setState({ codePostal: mappedCP });
}

React应答器

<Col lg="6">
<FormGroup>
<label
className="form-control-label"
htmlFor="input-email"
>
gouvernorat
</label>
<Select

name="gouvernorat"
options={this.getUnique(this.state.gouvernoratS,'label')}
className="basic-multi-select"
classNamePrefix="select"
onChange={this.SelectgouvernoratHandler.bind(this)}
/>
</FormGroup>
</Col>
<Col lg="6">
<FormGroup>
<label
className="form-control-label"
htmlFor="input-email"
>
Délégation
</label>
<Select
name="delegation"
options={this.getUnique(this.state.delegationS.filter((del)=>
del.value.gouvernorat === this.state.gouvernorat
),'label')}
className="basic-multi-select"
classNamePrefix="select"
onChange={this.SelectDelegationHandler.bind(this)}
/>
</FormGroup>
</Col>
</Row>
<Row>
<Col lg="6">
<FormGroup>
<label
className="form-control-label"
htmlFor="input-username"
>
Localité
</label>

<Select

name="localite"
options={this.state.localiteS.filter((del)=>
del.value.gouvernorat === this.state.gouvernorat
&& del.value.delegation === this.state.delegation
)}
className="basic-multi-select"
classNamePrefix="select"
onChange={this.SelectLocaliteHandler.bind(this)}
/>
</FormGroup>

</Col>
<Col lg="6">
<FormGroup>
<label
className="form-control-label"
htmlFor="input-username"
>
Code postal
</label>
<Select

name="codePostal"
options={this.state.codePostalS.filter((del)=>
del.value.gouvernorat === this.state.gouvernorat
&& del.value.delegation === this.state.delegation
&& del.value.localite === this.state.localite
)}
className="basic-multi-select"
classNamePrefix="select"
onChange={this.SelectCodePostalHandler.bind(this)}
/>
</FormGroup>
</Col>
</Row>
<Row>