複数のドロップダウンメニューの状態

Question

3つの重要なUIドロップダウンがあります。私は1つの状態値の変更を選択すると、部分的には問題ありませんが、他のドロップダウンメニューの値を変更するために間違っていますが、この問題を解決するにはどうすればいいですか？

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 

Answer 1

理由は、代わりに、その使用の三のドロップダウン、3つの別々のstate値、各ドロップダウンのための1つを制御するために単一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 
    }); 
}