2017-05-17 135 views
1

我有三個材料的UI下拉菜單。我希望當我選擇一個狀態值改變時,這部分是正確的,但是它不正確,因爲它改變了其他下拉菜單的值,我該如何解決這個問題?多個下拉菜單狀態

import React,{Component} from 'react'; 
     import DropDownMenu from 'material-ui/DropDownMenu'; 
     import MenuItem from 'material-ui/MenuItem'; 

     class DateOfBirth extends Component{ 
      constructor(props){ 
       super(props) 
       this.state ={ 
        year: '2005', 
        month: '08', 
        day: '10', 
        value: 1 
       } 
      } 

      handleChange = (event, index, value) => { 
       this.setState({value}); 
      } 
      componentWillMount(){ 
       const {date} = this.props 
       console.log(date) 
      } 
      render(){ 
       return(
        <div> 
         <p>Date Of Birth</p> 
         <DropDownMenu 
          value={this.state.value} 
          onChange={this.handleChange}> 
          <MenuItem value={1} primaryText="Year" /> 
          <MenuItem value={this.state.year} primaryText={this.state.year} /> 
         </DropDownMenu> 

         <DropDownMenu 
          value={this.state.value} 
          onChange={this.handleChange} 
         > 
          <MenuItem value={1} primaryText="Month" /> 
          <MenuItem value={this.state.month} primaryText={this.state.month}/> 
         </DropDownMenu> 

         <DropDownMenu 
          value={this.state.value} 
          onChange={this.handleChange} 
         > 
          <MenuItem value={1} primaryText="Day" /> 
          <MenuItem key="day" value={this.state.day} primaryText={this.state.day} /> 
         </DropDownMenu> 
        </div> 
       ) 
      } 
     } 
     export default DateOfBirth 

回答

0
原因

是,使用的是單state變量來控制三個下拉菜單,而不是使用三個單獨的state值,每個下拉菜單。

像這樣:

this.state ={ 
     year: '2005', 
     month: '08', 
     day: '10', 
     value1: 1, 
     value2: 1, 
     value3: 1 
} 

render方法是這樣的:

render(){ 
    return(
     <div> 
      <p>Date Of Birth</p> 
      <DropDownMenu 
       value={this.state.value1} 
       onChange={(e, i, value) => this.setState({value1: value})}> 
       <MenuItem value={1} primaryText="Year" /> 
       <MenuItem value={this.state.year} primaryText={this.state.year} /> 
      </DropDownMenu> 

      <DropDownMenu 
       value={this.state.value2} 
       onChange={(e, i, value) => this.setState({value2: value})}> 
      > 
       <MenuItem value={1} primaryText="Month" /> 
       <MenuItem value={this.state.month} primaryText={this.state.month}/> 
      </DropDownMenu> 

      <DropDownMenu 
       value={this.state.value3} 
       onChange={(e, i, value) => this.setState({value3: value})}> 
      > 
       <MenuItem value={1} primaryText="Day" /> 
       <MenuItem key="day" value={this.state.day} primaryText={this.state.day} /> 
      </DropDownMenu> 
     </div> 
    ) 
} 

注:如果您使用的是常見的onChange方法再結合一些標識符與的onChange確定哪些下拉被更改並更新特定的狀態值。

更新使用單一的onChange方法:

render(){ 
    return(
     <div> 
      <p>Date Of Birth</p> 
      <DropDownMenu 
       value={this.state.value1} 
       onChange={(e, i, value) => this._handleChange('value1', value)}> 
       <MenuItem value={1} primaryText="Year" /> 
       <MenuItem value={this.state.year} primaryText={this.state.year} /> 
      </DropDownMenu> 

      <DropDownMenu 
       value={this.state.value2} 
       onChange={(e, i, value) => this._handleChange('value2', value)}> 
      > 
       <MenuItem value={1} primaryText="Month" /> 
       <MenuItem value={this.state.month} primaryText={this.state.month}/> 
      </DropDownMenu> 

      <DropDownMenu 
       value={this.state.value3} 
       onChange={(e, i, value) => this._handleChange('value3', value)}> 
      > 
       <MenuItem value={1} primaryText="Day" /> 
       <MenuItem key="day" value={this.state.day} primaryText={this.state.day} /> 
      </DropDownMenu> 
     </div> 
    ) 
} 

_handleChange(fieldName, value){ 
    this.setState({ 
     [fieldName]: value 
    }); 
} 
+0

謝謝,是有辦法,我可以設置在handleState功能的狀態呢? – Dumisani

+0

檢查更新後的答案:) –

+0

感謝男人它效果不錯:) – Dumisani