реагировать родной 2 выпадающего списка зависит от первого - PullRequest
Новая
       5

реагировать родной 2 выпадающего списка зависит от первого

0 голосов
/ 13 февраля 2020

Я пытаюсь соединить два выпадающих списка в реагировать на родной, так же, как страна и город, если я выбираю какую-либо страну, она должна загружать города из этой страны, во второй - все данные находятся во внешнем файле 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>

1 Ответ

0 голосов
/ 13 февраля 2020

Вы можете попробовать это так, я только что сделал это с помощью 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>
...