Material UIの選択に従ってドロップダウンを有効にする

Question

Material UIを持つ3つのドロップダウンコンポーネントがありますが、2番目と3番目のコンポーネントを無効にし、前のドロップダウンからオプションを選択してから有効にします。たとえば、2番目のドロップダウンは最初のドロップダウンから何かを選択した後に有効になり、3番目のドロップダウンは2番目以降のオプションを選択すると有効になります。

これは私のコードです：

また

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

もう一つ、私は結果が位置0のデータを表示するWS Iからフェッチするとき、今、私が変更したいのは、デフォルトのようにすることです0の代わりにオプションを使用します。

いくつかの助けがよかったです。

よろしくお願いいたします。成功したフェッチにDivisionState、StoreGroupingState、OfferTypeStateを設定しないことで

Answer 1

スタート、例えば

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> 

ための最後の事はdisabledプロパティを設定します前の値が設定されていない場合は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/>