react native 2 下拉列表取决于第一个答案

【问题标题】：react native 2 dropdown depend on first onereact native 2 下拉列表取决于第一个
【发布时间】：2020-02-13 08:11:48
【问题描述】：

我正在尝试在 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>

【问题讨论】：

你遇到了什么问题？
它不工作
“它不工作”是什么意思？为什么使用intre2？不应该是this.interest.bind(this)和this.state.interest吗？

标签： json reactjs react-native react-native-android dropdown

【解决方案1】：

你可以这样尝试，我只是用 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>

【讨论】：