React Js Select 输入地址映射

Question

如何将包含不同地址属性的 json 文件映射到不同的 React select 列表？

Answer 1

所以首先，您需要创建 select 处理程序，然后在函数“ComponentWillMount”和“ComponentWillReceiveProps”中映射数据，然后添加带有映射选项的 select 输入。

如需帮助，可以私信我。

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","codePostal":"2080"}, {"id":"5","gouvernorat":"Ariana","delegation":"Ariana Ville","localite":"Residence Ennour (Naser 2)","codePostal":"2037"}, {"id":"6","gouvernorat":"Ariana","delegation":"Ariana Ville","localite":"El Menzah 6","codePostal":"2091"}, {"id":"7","gouvernorat":"Ariana","delegation":"Ariana Ville","localite":"Cite Ennasr 1","codePostal":"2037"}, ]

Select 处理程序

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

ComponentWillMount

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

//政府

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>

React Js Select 输入地址映射

React Js Select Input Address Mapping

mapping

json

reactjs

selectinput