Javascript 根据物料界面中的选择启用下拉列表

我有3个下拉菜单组件和Material UI，我想做的是禁用第二个和第三个组件，并在从上一个下拉菜单中选择一个选项后启用它们。例如，在从第一个下拉列表中选择某个内容后，第二个下拉列表将启用，而当我从第二个下拉列表中选择某个选项时，第三个下拉列表将启用，依此类推

这是我的代码：

import React from 'react';
import DropDownMenu from 'material-ui/DropDownMenu';
import MenuItem from 'material-ui/MenuItem';

import cr from '../styles/general.css';


export default class CreateLinksave extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      startDate: '',
      endDate: '',
      DivisionData: [],
      StoreGroupingData: [],
      OfferTypeData: [],
      DivisionState: '',
      OfferTypeState: '',
      StoreGroupingState: ''
    };
    this.handleChange = this.handleChange.bind(this);
    this.renderStoreGroupingOptions = this.renderStoreGroupingOptions.bind(this);
    this.renderDivisionOptions = this.renderDivisionOptions.bind(this);
    this.renderOfferTypeOptions = this.renderOfferTypeOptions.bind(this);
    this.handleChangeDivision = this.handleChangeDivision.bind(this);
    this.handleChangeStoreGrouping = this.handleChangeStoreGrouping.bind(this);
    this.handleChangeDiscountType = this.handleChangeDiscountType.bind(this);
  }

  componentDidMount() {
    const divisionWS = 'http://localhost:8080/services/Divisions/getAll';
    const offerTypeWS = 'http://localhost:8080/services/OfferType/getAll';
    const storeGroupingWS = 'http://localhost:8080/services/Rules/getRuleTextDtoQuery/Y/ENG';

    fetch(divisionWS)
      .then(Response => Response.json())
      .then(findResponse => {
        console.log(findResponse);

        this.setState({
          DivisionData: findResponse,
          DivisionState: findResponse[0].divDeptShrtDesc
        });
      });

    fetch(storeGroupingWS)
      .then(Response => Response.json())
      .then(findResponse => {
        console.log(findResponse);

        this.setState({
          StoreGroupingData: findResponse,
          StoreGroupingState: findResponse[0].ruleDesc
        });
      });

    fetch(offerTypeWS)
      .then(Response => Response.json())
      .then(findResponse => {
        console.log(findResponse);

        this.setState({
          OfferTypeData: findResponse,
          OfferTypeState: findResponse[0].offerTypeDesc
        });
      });
  }

  handleChange(event, index, value) {this.setState({value});}

  handleChangeDivision(event, index, value) {
    this.setState({ DivisionState: (value) });
  }

  handleChangeStoreGrouping(event, index, value) {
    this.setState({ StoreGroupingState: (value) });
  }

  handleChangeDiscountType(event, index, value) {
    this.setState({ OfferTypeState: (value) });
  }

  renderDivisionOptions() {
    return this.state.DivisionData.map((dt, i) => {
      return (
        <MenuItem
          key={i}
          value={dt.divDeptShrtDesc}
          primaryText={dt.divDeptShrtDesc} />
      );
    });
  }

  renderStoreGroupingOptions() {
    return this.state.StoreGroupingData.map((dt, i) => {
      return (
        <MenuItem
          key={i}
          value={dt.ruleDesc}
          primaryText={dt.ruleDesc} />
      );
    });
  }

  renderOfferTypeOptions() {
    return this.state.OfferTypeData.map((dt, i) => {
      return (
        <MenuItem
          key={i}
          value={dt.offerTypeDesc}
          primaryText={dt.offerTypeDesc} />
      );
    });
  }

  render() {

    return (
      <div className={cr.container}>
        <div className={cr.rows}>
          <div>
            <DropDownMenu
              value={this.state.DivisionState}
              onChange={this.handleChangeDivision}>
              {this.renderDivisionOptions()}
            </DropDownMenu>
            <br/>
            <DropDownMenu
              value={this.state.StoreGroupingState}
              onChange={this.handleChangeStoreGrouping}>
              {this.renderStoreGroupingOptions()}
            </DropDownMenu>
            <br/>
            <DropDownMenu
              value={this.state.OfferTypeState}
              onChange={this.handleChangeDiscountType}>
              {this.renderOfferTypeOptions()}
            </DropDownMenu>
            <br/>
          </div>
        </div>
      </div>
    );
  }
}

从“React”导入React；
从“物料界面/下拉菜单”导入下拉菜单；
从“物料界面/菜单项”导入菜单项；
从“../styles/general.css”导入cr；
导出默认类CreateLinksave扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
起始日期：''，
结束日期：“”，
分区数据：[]，
StoreGroupingData:[]，
OfferTypeData:[]，
州：''，
OfferTypeState:“”，
StoreGroupingState:“”
};
this.handleChange=this.handleChange.bind（this）；
this.renderStoreGroupingOptions=this.renderStoreGroupingOptions.bind（this）；
this.rendervisionoptions=this.rendervisionoptions.bind（this）；
this.renderofertypeoptions=this.renderofertypeoptions.bind（this）；
this.handleChangeDivision=this.handleChangeDivision.bind（this）；
this.handleChangeStoreGrouping=this.handleChangeStoreGrouping.bind（this）；
this.handlechangedeporttype=this.handlechangedeporttype.bind（this）；
}
componentDidMount（）{
康斯特分部http://localhost:8080/services/Divisions/getAll';
常量offerTypeWS='1〕http://localhost:8080/services/OfferType/getAll';
const storeGroupingWS=http://localhost:8080/services/Rules/getRuleTextDtoQuery/Y/ENG';
取回（WS）
.then（Response=>Response.json（））
。然后（findResponse=>{
console.log（findResponse）；
这是我的国家({
部门数据：findResponse，
分区状态：findResponse[0]。divDeptShrtDesc
});
});
获取（storeGroupingWS）
.then（Response=>Response.json（））
。然后（findResponse=>{
console.log（findResponse）；
这是我的国家({
StoreGroupingData:findResponse，
StoreGroupingState:findResponse[0]。规则描述
});
});
获取（offerTypeWS）
.then（Response=>Response.json（））
。然后（findResponse=>{
console.log（findResponse）；
这是我的国家({
OfferTypeData:findResponse，
OfferTypeState:findResponse[0]。offerTypeDesc
});
});
}
handleChange（事件、索引、值）{this.setState（{value}）；}
handleChangeDivision（事件、索引、值）{
this.setState（{DivisionState:（value）}）；
}
HandleChangeStoreGroup（事件、索引、值）{
this.setState（{StoreGroupingState:（value）}）；
}
handleChangeDiscountType（事件、索引、值）{
this.setState（{OfferTypeState:（value）}）；
}
RenderVisionOptions（）{
返回这个.state.DivisionData.map（（dt，i）=>{
返回(
);
});
}
renderStoreGroupingOptions（）{
返回此.state.StoreGroupingData.map（（dt，i）=>{
返回(
);
});
}
RenderoferTypeOptions（）{
返回此.state.OfferTypeData.map（（dt，i）=>{
返回(
);
});
}
render（）{
返回(
{this.renderDivisionOptions（）}


{this.renderStoreGroupingOptions（）}


{this.renderoferTypeOptions（）}


);
}
}

还有一件事，现在当我从显示位置0中数据的WS-I获取结果时，我想要更改的是使用一个默认选项，而不是0位置

来点帮助就好了

---

关于。

首先不要设置

分区状态

，

存储组状态

，

OfferTypeState

，例如，在获取成功时

this.setState({
    DivisionData: findResponse,
    // DivisionState: findResponse[0].divDeptShrtDesc <= Remove this 
});

<DropDownMenu
    value={this.state.DivisionState}
    onChange={this.handleChangeDivision}>
    <MenuItem value={''} primaryText={'Select option'} />
    {this.renderDivisionOptions()}
</DropDownMenu>

this.setState({
部门数据：findResponse，
//分区状态：findResponse[0]。divDeptShrtDesc
    <DropDownMenu
        value={this.state.DivisionState}
        onChange={this.handleChangeDivision}>
        <MenuItem value={''} primaryText={'Select option'} />
        {this.renderDivisionOptions()}
    </DropDownMenu>
    <br/>
    <DropDownMenu
        disabled={!this.state.DivisionState}
        value={this.state.StoreGroupingState}
        onChange={this.handleChangeStoreGrouping}>
        <MenuItem value={''} primaryText={'Select option'} />
        {this.renderStoreGroupingOptions()}
    </DropDownMenu>
    <br/>
    <DropDownMenu
        disabled={!this.state.StoreGroupingState}
        value={this.state.OfferTypeState}
        onChange={this.handleChangeDiscountType}>
        <MenuItem value={''} primaryText={'Select option'} />
        {this.renderOfferTypeOptions()}
    </DropDownMenu>
    <br/>