Connect zwei Picker modal in reagieren nativen

Question

I nativen verwenden reagieren modal Picker die Daten link here

ich zwei modal Picker verwendet, um Drop-Down, die voneinander abhängig sind. Der erste ist Service auswählen. Der zweite ist Stadt auswählen. Ich möchte Städte mit bestimmten Services anzeigen. Code ist hier

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
Alert, 
TouchableHighlight, 
Image, 
TextInput, 
} from 'react-native'; 

var fullservice=[]; 
var citylist=[]; 

import ModalPicker from 'react-native-modal-picker' 

class jsonSugei extends Component { 


    constructor() { 
     super(); 

     this.state = { 

      textInputValue: '', 

      dropdownservices:[], 

      city:'', 
      dropdowncities:[], 
      service:'', 




     } 
    } 

    componentDidMount() { 

    this.fetchData1(); 
    this.fetchData2(); 



} 

fetchData1(){ 



    fetch("URL", 
    {method: "POST", 
    headers: { 
      'Accept': 'application/json', 
       'Content-Type': 'application/json', 
      }, 
    body: JSON.stringify({"cacheRequest":["ALL_COMPANY","ALL_SERVICE","HOT_COMPANY","BANNER","PARTNER","CITY","CALANDAR","COMMENTS "]}), 
    }) 
    .then((response) => response.json()) 
    .then((responseData) => { 

     this.setState({ 
     dropdownservices: responseData.services, 
     }); 
    }) 
    .catch((error) => { console.warn(error); }) 
.done(); 




} 

fetchData2(){ 

    this.state = { 
     service:'', 

    } 


    fetch("URL", 
    {method: "POST", 
    headers: { 
      'Accept': 'application/json', 
       'Content-Type': 'application/json', 
      }, 
    body: JSON.stringify({ 
    "companyId":"", 
    "service":this.state.service, 
    "key":"" 

}), 
    }) 
    .then((response) => response.json()) 
    .then((responseData) => { 

     this.setState({ 
     dropdowncities: responseData.cities, 
     }); 
    }) 
    .catch((error) => { console.warn(error); }) 
.done(); 


} 









    render() { 


    citylist= this.state.dropdowncities.map(function(item) { 

    return { 
     key:item.id, 
     label: item.name, 

    }; 
    }); 


    fullservice =this.state.dropdownservices.map(function(item) { 

    return { 
     key:item.id, 
     label: item.name, 
    }; 
    }); 





     return (
      <View style={{flex:1, justifyContent:'space-around', padding:50, backgroundColor: '#ffffff'}}> 

       <ModalPicker1 
        data={fullservice} 
        initValue="Select Services!" 
        onChange={(option)=>{this.setState({service:option.label})}} 
        /> 



        <ModalPicker 
         style={{marginTop:10}} 
         data={citylist} 
         initValue="City" 
         onChange={(option)=>{ this.setState({city:option.label})}} 
         /> 


      </View> 
     ); 
    } 
} 


const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    alignItems: 'center', 
    justifyContent: 'center', 
    backgroundColor: '#ffffff', 
    }, 
    button: { 
    borderRadius: 4, 
    padding: 10, 
    marginLeft: 10, 
    marginRight: 10, 
    backgroundColor: "#B8C", 
    }, 
}); 

AppRegistry.registerComponent('jsonSugei',() => jsonSugei); 

aber nicht Städte nach den Dienstleistungen ändern ??? Ich brauche Hilfe ............

Answer 1

Der onChange-Ereignishandler für Services ModalPicker sollte den Status für die Städte ModalPicker festlegen. Außerdem sollte der anfängliche Abruf für die Städte ModalPicker nur Städte abrufen, die dem Standarddienst entsprechen.

Answer 2

hinzufügen eine andere Funktion zum ersten modalen Picker, und stellen Sie die Dateneinheit als Zustandsgröße erhalten,

<ModalPicker1 data={fullservice} initValue="Select Services!" onChange={(option)=>{this.setState({service:option.label}),this.secondFunction()}} /> 

dann die state.cities Variable in der zweiten Funktion gesetzt und es als die Dateneinheit in der zweiten verwenden Modale Auswahl,

secondFunction(){ 
    this.setState({cities:array}); 
} 

<ModalPicker2 data={this.state.cities} initValue="City" onChange={(option)=>{this.setState({city:option.label})}} />