使用Reactjs，Graphql和Relay进行依赖下拉

Question

Am正在使用Reactjs，postgres，Graphql和Relay进行FullStack Web开发。 我想创建一个依赖下拉列表。我已经完成了数据的提取和填充。但是如何使我的下拉菜单相互依赖。

这是我的完整代码：

import React from 'react';
import {graphql, QueryRenderer} from 'react-relay';
import environment from './environment';

export default class App extends React.Component<Props> {

  constructor(props) {
    super(props);
    this.state = {value: ' None '};

    this.handleState = this.handleState.bind(this);
    this.handleDistrict = this.handleDistrict.bind(this);
  }

  handleState(event) {
    this.setState({value: event.target.value});
    console.log("You have selected " + event.target.value);
  }

  handleDistrict(event) {
    //console.log(this.handleState)
    this.setState({value1: event.target.value});
    console.log(event.target.value)
  }

  render() {
    return (
      <QueryRenderer
        environment={environment}
        query={graphql`
          query AppQuery {
            query {
              allStates (orderBy: STATENAME_ASC){
                nodes {
                  statename
                  rowId
                  district
                  taluka
                }
              }
            }
          }
        `}
        variables={{}}
        render={({error, props}) => {

          if (error) {
            return <div>Error!</div>;
          }
          if (!props) {
            return <div>Loading...</div>;
          }

          return <div>
                    <h4>Select State</h4>

                    <select id="state_select" onChange={this.handleState}>
                    <option disabled>--Select State--</option>
                    {props.query.allStates.nodes.map((state) => 
                    <option key={state.rowId}>{state.statename}</option>)}</select><br></br><br></br>

                    <p>You selected: {this.state.value}</p>

                    <h4>Select District</h4>

                    <select id="district_select" onChange={this.handleDistrict}>
                    <option>--Select District</option>)}</select><br></br><br></br>

                    <p>You selected: {this.state.value1}</p>

                    <h4>Select Taluka</h4>

                    <select id="taluka_select"><option>--Select Taluka--</option></select><br></br><br></br>

                 </div>;
        }}
      />
    );
  }
}

我的json字符串看起来像这样

{
  "data": {
    "query": {
      "allStates": {
        "nodes": [
          {
            "statename": "Delhi",
            "rowId": 1,
            "district": "West",
            "taluka": "Dwarka"
          },
          {
            "statename": "Delhi",
            "rowId": 2,
            "district": "North",
            "taluka": "Narela"
          },
          {
            "statename": "Mumbai",
            "rowId": 5,
            "district": "Paschim",
            "taluka": "Borevilli"
          }
        ]
      }
    }
  }
}

这是我的输出图像：Output Image   。有人可以帮忙吗？