从 React 中第一个 select 的选项中获取第二个 select 的值

Question

万岁。我正在尝试使用 http://fipeapi.appspot.com/ api.

从第一个 select 选项中创建第二个 select 选项

例如在第一个 select 中，我有以下选项： 1.Fruits 2.Roots 3.Flowers

如果我选择水果会出现橙色、苹果和草莓如果我选择根会出现甜菜、胡萝卜和萝卜如果我选择花会出现朝鲜蓟、花椰菜和西兰花

所以当我选择水果时，我没有得到第一个 selection 的值来显示第二个 selection

的选项

我试着做一个引用来获取第一个 selection 的值，但我没有在第二个 selection 中使用它。

所有代码： 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>

从 React 中第一个 select 的选项中获取第二个 select 的值

Get the values of the second select from the options of the first select in React

javascript

html-select

reactjs