Material UI의 선택에 따라 드롭 다운 활성화

Question

Material UI가 포함 된 드롭 다운 구성 요소가 3 개 있습니다. 두 번째 및 세 번째 구성 요소를 비활성화하고 이전 드롭 다운에서 옵션을 선택한 후 활성화 할 수 있습니다. 예를 들어, 두 번째 드롭 다운은 첫 번째 드롭 다운에서 항목을 선택한 후 활성화하고 세 번째 드롭 다운은 두 번째 옵션을 선택할 때 활성화됩니다. 나는 내가 무엇을 변경하고자하는 것은 기본적으로 같은 것입니다, 결과는 내가 위치 0에있는 데이터를 표시하는 WS에서 오는 가져올 때 또한

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 위치 대신.

도움이 될 것입니다.

감사합니다. 예를 들어, 성공적인 가져 오기에 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> 

마지막 일 설정 해제 속성에 대해 기본 옵션을 렌더링 이전을 설정하지 않은 경우 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/>