javascript - 根据 Material UI 中的选择启用下拉菜单

Question

我有 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>
    );
  }
}

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

一些帮助会很好。

问候。

Answer 1

例如，首先在获取成功时不设置 DivisionState、StoreGroupingState、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>

最后一件事将禁用属性设置为 true 如果前一个未设置

    <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/>