时间戳

首页 > 解决方案 > react native 2 下拉列表取决于第一个

json - react native 2 下拉列表取决于第一个

问题描述

我正在尝试将两个下拉列表与 react native 连接，与国家和城市相同，如果我选择任何国家，它应该将该国家的城市加载到第二个下拉列表中，所有数据都在外部 json 文件中，但两个下拉列表中都没有加载（选择器）

.json 文件：

{
  "interest": [
        {
            "RAW_MATERIAL":["abc","cde"]
        },
        {
            "OEM_PARTS":["xyz","qwer"]
        },
        {
           "CONSUMABLES":["poiu","fjgl"]
        },
        {
            "SERVICE":["xvcbv","qweiw"]
        }
    ],
}

反应我使用的本地选择器：

import React, { Component } from 'react';
import { Container,Picker,Button } from 'native-base';

const cData = require('../data.json');
export default class Vendorsupplies extends Component {

  constructor(props) {
    super(props);
    this.state = {
      interest:'',
      interest2:''
    };
  }


 interest(value: string) {
    this.setState({
      interest: value
    });
  }
 interest2(value: string) {
    this.setState({
      interest2: value
    });
  }

<Picker
              note
              mode="dropdown"
              style={{ width: 120 }}
              selectedValue={this.state.interest}
              onValueChange={this.interest.bind(this)}
              name="intre"
            >
            {cData.interest.map((number) =>
  <Picker.Item label={number.interest_in} value={number.interest_in} />
                      )} 
              </Picker>

<Picker
              note
              mode="dropdown"
              style={{ width: 120 }}
              selectedValue={this.state.intre2.interest}
              onValueChange={this.intre2.interest.bind(this)}
              name="intre2"
            >
            {cData.interest.map((number) =>
  <Picker.Item label={number.intre2.interest_in} value={number.intre2.interest_in} />
                      )} 
              </Picker>

标签： jsonreactjsreact-nativereact-native-androiddropdown

解决方案

你可以这样尝试，我刚刚用 select 完成了它，但你会明白的。

const cData = {
  interest: [
    {
      RAW_MATERIAL: ['abc', 'cde'],
    },
    {
      OEM_PARTS: ['xyz', 'qwer'],
    },
    {
      CONSUMABLES: ['poiu', 'fjgl'],
    },
    {
      SERVICE: ['xvcbv', 'qweiw'],
    },
  ],
};

class TodoApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      interest: 'RAW_MATERIAL',
      interest2: '',
    };
  }

  renderOption() {
    const el = cData.interest.find(
      interest => Object.keys(interest)[0] === this.state.interest
    );

    if (el) {
      return el[this.state.interest].map(option => (
        <option value={option}>{option}</option>
      ));
    }
    return <option>empty</option>;
  }

  render() {
    return (
      <React.Fragment>
        <select
          value={this.state.interest}
          onChange={e => {
            e.persist();
            this.setState(prev => ({
              ...prev,
              interest: e.target.value,
            }));
          }}
        >
          {cData.interest.map(el => (
            <option value={Object.keys(el)}>{Object.keys(el)}</option>
          ))}
        </select>
        <select
          value={this.state.interest2}
          onChange={e => {
            e.persist();
            this.setState(prev => ({ ...prev, interest2: e.target.value }));
          }}
        >
          {this.renderOption()}
        </select>
      </React.Fragment>
    );
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

推荐阅读