Получить значения второго выбора из вариантов первого выбора в React

Question

радуйся.Я пытаюсь сделать второй выбор вариантов из первых вариантов выбора, используя http://fipeapi.appspot.com/ api.

Например, при первом выборе у меня есть следующие опции: 1. Фрукты 2. Корни 3.Цветы

Если я выберу Фрукты появятся Апельсин, Яблоко и Клубника Если я выберу Корни появятся Свекла, Морковь и Редька Если я выберу Цветы, то появятся Артишок, Цветная капуста и Брокколи

Так что когдаЯ выбираю фрукты, у которых не отображается значение первого выбора, чтобы показать параметры второго выбора

Я пытался сделать ссылку, чтобы взять значение первого выбора, но я не использую его ввторой выбор.

Весь код: http://jsfiddle.net/Orcrinhos/jfq7zc5p/

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  constructor() {
    super();

    this.state = {
      marks: [],
      models: [],
    };

    this.handleSubmit = this.handleSubmit.bind(this);
    this.getMark = this.getMark.bind(this);
    this.getModel = this.getModel.bind(this);
  }

  componentDidMount() {
    this.getMarkInfo();
    this.getModelInfo();
  }

  handleSubmit(event) {
    event.preventDefault();
    alert('test');
  }

  getMark(event) {
    this.getMarkInfo(this.refs.markRef.value)
    this.setState({ markValue: event.target.value });
  }

  getModel(event) {
    this.getCarInfo(this.refs.modelRef.value)
    this.setState({ modelValue: event.target.value });
  }

  getMarkInfo() {
    const url = `http://fipeapi.appspot.com/api/1/carros/marcas.json`;
    fetch(url)
      .then(data => data.json())
      .then(data => this.setState({ marks: data }));
  }

  getModelInfo(markRef = this.refs.markRef.value) {
    const url = `http://fipeapi.appspot.com/api/1/carros/veiculos/${markRef}.json`;

    fetch(url)
      .then(data => data.json())
      .then(data => this.setState({ models: data }));
  }

  render() {
    return (
      <div>
        <form>
          <fieldset>
            <legend>Some legend</legend>

            {/* First select */}
            <select ref="markRef" onChange={(e) => { this.getMark(); }}>
              {this.state.marks.map(function (mark, index) {
                return (
                  <option key={index} value={mark.id}>{mark.name}</option>
                )
              }
              )}
            </select>

            {/* Second select */}
            <select ref="modelRef" onChange={(e) => { this.getModel(); }}>
              {this.state.models.map(function (model, index) {
                return (
                  <option key={index} value={model.id}>{model.name}</option>
                )
              }
              )}
            </select>
          </fieldset>

          <button type="submit">Show data</button>
        </form>

        <h3>Marks of car</h3>
        <div className="break">
          {this.state.marks.map(function (mark, index) {
            return (
              <div key={index}>
                <p>{mark.name}</p>
              </div>
            )
          }
          )}
        </div>

        <h3>Models of car</h3>
        {this.state.models.map(function (model, index) {
          return (
            <div key={index}>
              <p>{model.name}</p>
            </div>
          )
        }
        )}

      </div>
    );
  }
}

export default App;

Когда я пытаюсь, появляются другие способы:

Невозможно прочитать свойство 'target' изне определен

Answer 1

Пожалуйста, передайте событие в качестве аргумента в функцию.Попробуйте ниже

 {/* First select */}
            <select ref="markRef" onChange={(e) => { this.getMark(e); }}> // pass event as e
              {this.state.marks.map(function (mark, index) {
                return (
                  <option key={index} value={mark.id}>{mark.name}</option>
                )
              }
              )}
            </select>

            {/* Second select */}
            <select ref="modelRef" onChange={(e) => { this.getModel(e); }}> //pass e
              {this.state.models.map(function (model, index) {
                return (
                  <option key={index} value={model.id}>{model.name}</option>
                )
              }
              )}
            </select>