时间戳

首页 > 解决方案 > 构建下拉列表并从 URL 动态获取 JSON 数据的最佳方法是什么

json - 构建下拉列表并从 URL 动态获取 JSON 数据的最佳方法是什么

问题描述

我的下拉列表中有三个 Items ===> Item0,Item1,Item2 。每次选择特定项目时，我都想获取 JSON 数据并将其显示在页面上（在 IOS 上）。我不明白在哪里为下拉菜单定义 onPress 事件。任何帮助，将不胜感激。

    const leveldata = [
        { value: 'level1', props: { disabled: true } },
        { value: 'level2' },
        { value: 'level3' },

];class TopScores extends Component {
    constructor(props) {
        super(props);
        this.onChangeText = this.onChangeText.bind(this);
        this.state = {
            data: [],
        };
    }

    onChangeText() {
        if (leveldata.value === 'leve1') {
            fetch('url')
            .then((response) => response.json())
            .then((responseData) => {
                this.setState({
                  newdata: responseData.newdata,
                });
            })
            .done();
        } else if (leveldata.value === 'level2') {
            fetch('url1')
            .then((response) => response.json())
            .then((responseData) => {
                this.setState({
                  newdata: responseData.newdata,
                });
            })
            .done(); 
        }
    }
render() {
        console.log('data:', this.state.data);
        return (
            <View>
                <View style={styles.container1}>
                    <Image
                        /* eslint-disable global-require */
                        source={require('../Images/Top.png')}
                    /* eslint-enable global-require */
                    />
                    <Text style={styles.Text1}> Top Contenders</Text>
                </View>
                <View>
                    <Dropdown
                        data={leveldata}
                        label='Level'
                        onChangeText={this.onChangeText}
                    />
                </View>
            </View>
        );
    }
}

标签： jsonreactjsreact-nativepicker

解决方案

如果我没记错的话，你需要添加onChangeText道具。

import React, { Component } from 'react';

import {
  Text,
  View,
  StyleSheet,
  Image
} from 'react-native';

import { Dropdown } from 'react-native-material-dropdown';

const leveldata = [
  { value: 'level1', props: { disabled: true } },
  { value: 'level2' },
  { value: 'level3' }
];

class TopScores extends Component {
  constructor(props) {  
    super(props);

    this.onChangeText = this.onChangeText.bind(this);

    this.state = {
      data: []
    };
  }

  onChangeText(text) {
    if(text === 'leve1'){
      fetch('url')
        .then((response) => response.json())
        .then((responseData) => {
          this.setState({
            newdata: responseData.newdata,
          });
        })
        .done();
    }
  }

  render() {
    return (
      <View>
        <Dropdown
          data={leveldata}
          label='Level'
          onChangeText={this.onChangeText} />
      </View>
    );
  }
}

推荐阅读