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

您将相同的onChange用于两个不同的下拉菜单。您只应将当前的onChange用于第一个选择，然后在其中进行操作，然后

this.setState(objectSubtype: myCustomData);

随着您状态的更新，第二个选择现在将显示您的信息

Answer 2

对于第一个选择“ 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})
}

React-如何使用来自本地.json文件的数据基于另一个选择菜单的值填充一个选择菜单

2 个答案: