Question

我使用反应原生模态选择器来下拉数据link here

我使用了两个相互依赖的模态选择器。第一个是选择服务。第二个是选择城市。我想展示有特定服务的城市。代码在这里

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

但不是根据服务改变城市???我需要帮助............

Answer 1

服务ModalPicker的onChange事件处理程序应设置城市ModalPicker的状态。此外，城市ModalPicker的初始提取应仅提取与默认服务相对应的城市。

Answer 2

向第一个模态选择器添加另一个函数，并将数据实体设置为get状态变量

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

然后在第二个函数中设置state.cities变量，并将其用作第二个模态选择器中的数据实体，

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

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

反应本机连接两个模态选择器

2 个答案: