javascript - React - 如何使用本地 .json 文件中的数据根据​​另一个选择菜单的值填充一个选择菜单

Question

我尝试使用 React v16 中本地 .json 文件中的数据，根据选择菜单“对象类型”的值更改选择菜单“对象子类型”的内容

例如: 如果我在“对象类型”选择菜单中选择一种植物，那么它会在“对象子类型”选择菜单中显示芦荟、仙人掌和玫瑰。

我有一个data.json

{
  "object": [
    {
      "objectType": "Plant",
      "objectSubtype": ["Aloe","Cactus","Rose"]
    },
    {
      "objectType": "Animal",
      "objectSubtype": ["Cat","Dog","Dolphin"]
    },
    {
      "objectType": "Stone",
      "objectSubtype": ["Granite","Marble","Travertine"]
    }
  ]
}

我有 Object.js

import React, { Component } from "react";

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

    this.state = {
      objectType: "",
      objectSubtype: ""
    };
    this.onChange = this.onChange.bind(this);
  }
  onChange(e) {
    this.setState({ [e.target.name]: e.target.value });
  }

  render() {
    return (
      <form>
        <div className="form-group">
          <select
            id="objectType"
            multiple={false}
            className="form-control"
            value={this.state.objectType}
            onChange={this.onChange}
          >
            <option>Select an object type</option>
          </select>
        </div>
        <div className="form-group">
          <select
            id="objectSubtype"
            multiple={false}
            className="form-control"
            value={this.state.objectSubtype}
            onChange={this.onChange}
          >
            <option>Select an object subtype</option>
          </select>
        </div>
      </form>
    );
  }
}
export default Object;

我的目标是使用本地文件 data.json 中的数据填充两个选择菜单并根据选择菜单“对象类型”中的值填充第二个选择菜单“对象子类型”。怎么可能？

Answer 1

对于第一个选择“objectType”，设置如下选项

let objectOption = []
data.object.forEach(x=>objectOption.push(x.objectType))

并循环遍历第一个选择选项。 在此选择中更改值时，您需要设置第二个状态变量，即 objectSubtype

为此，您可以将 onChangeHandler 传递给您的第一个 Select 并从此处设置第二个状态。

onObjectChange = (value) => {
  // TODO: handle for null value as well
  let subTypeValue = data.object.filter(x=>x.objectType===value)[0].objectSubtype
  this.setState({objectType:value, objectSubtype:subTypeValue})
}

你的第二个 Select 可以有自己的 onChangeHandler，可以很简单

onSubObjectChange = (value) => {
  this.setState({objectSubtype:value})
}