json - React Js 选择输入地址映射

Question

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

标签： jsonreactjsmappingselectinput

Answer 1

因此，首先，您需要创建选择处理程序，然后在“ComponentWillMount”和“ComponentWillReceiveProps”函数中映射数据，然后使用映射选项添加选择输入。

如需帮助，您可以 dm 我。

JSON文件 这些是我处理的 json 文件中的几行。[ {"id":"1","gouvernorat":"Ariana","delegation":"Ariana Ville","localite":"Cite Borj Turki 2","codePostal":"2058"}, {"id ":"2","gouvernorat":"Ariana","delegation":"Ariana Ville","localite":"El Menzah 8","codePostal":"2037"}, {"id":"3" ,"gouvernorat":"Ariana","delegation":"Ariana Ville","localite":"Cite Du Printemps","codePostal":"2080"}, {"id":"4","gouvernorat": "Ariana","delegation":"Ariana Ville","localite":"Cite Des Roses",

选择处理程序

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 })

ComponentWillRecieveProps

//gouvernorat

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 });
}

反应应答器

                   <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>