React（Semantic-UI）の複数のDropdownの状態を管理

Question

私は、制御されたコンポーネントのドロップダウンメニューを作成するために、文書hereに従っています。

handleChange関数を変更して、「メンバーの選択」ドロップダウンリストまたは「選択日」ドロップダウンリストから値を受け取っていることに気づかせるにはどうすればよいでしょうか？部材「と」時間）

import React, { Component } from 'react' 
import { Dropdown, Grid } from 'semantic-ui-react' 

class DropdownExampleRemote extends Component { 
    componentWillMount() { 
    this.setState({ 
     optionsMembers: [ 
      { key: 1, text: 'DAILY', value: 'DAILY' }, 
      { key: 2, text: 'MONTHLY', value: 'MONTHLY' }, 
      { key: 3, text: 'WEEKLY', value: 'WEEKLY' }, 
     ], 
     optionsDays: [ 
      { key: 1, text: 'SUNDAY', value: 'SUNDAY' }, 
      { key: 2, text: 'MONDAY', value: 'MONDAY' }, 
      { key: 3, text: 'TUESDAY', value: 'TUESDAY' }, 
     ], 
     value: '', 
     member: '', 
     hour: '', 
    }) 
    } 

    handleChange = (e, { value }) => { 
    this.setState({ member: value }) 
    } 

    render() { 
    const {optionsMembers, optionsDays, value } = this.state 

    return (
     <Grid> 
     <Grid.Column width={6}> 
      <Dropdown 
      selection 
      options={optionsMembers} 
      value={value} 
      placeholder='Select Member' 
      onChange={this.handleChange} 
      /> 
     </Grid.Column> 
     <Grid.Column width={6}> 
      <Dropdown 
      selection 
      options={optionsDays} 
      value={value} 
      placeholder='Select Day' 
      onChange={this.handleChange} 
      /> 
     </Grid.Column> 
     <Grid.Column width={4}> 
      <div>{this.state.member}</div> 
      <div>{this.state.day}</div> 
     </Grid.Column> 
     </Grid> 
    ) 
    } 
} 

export default DropdownExampleRemote 

UPDATE：？ ソリューションは、状態を更新するために働いている理由のDropboxの選択は、プレースホルダに固執し、デフォルトではありませんまだ、わからないこれらに沿って

Answer 1

私はたとえば、あなたがハンドル変更機能に更新したい値の名前を渡し推薦：

import React, { Component } from 'react' 
import { Dropdown, Grid } from 'semantic-ui-react' 

class DropdownExampleRemote extends Component { 
    componentWillMount() { 
    this.setState({ 
     optionsMembers: [ 
      { key: 1, text: 'DAILY', value: 'DAILY' }, 
      { key: 2, text: 'MONTHLY', value: 'MONTHLY' }, 
      { key: 3, text: 'WEEKLY', value: 'WEEKLY' }, 
     ], 
     optionsDays: [ 
      { key: 1, text: 'SUNDAY', value: 'SUNDAY' }, 
      { key: 2, text: 'MONDAY', value: 'MONDAY' }, 
      { key: 3, text: 'TUESDAY', value: 'TUESDAY' }, 
     ], 
     value: '', 
     member: '', 
     day: '', 
    }) 
    } 

    handleChange = (value, key) => { 
    this.setState({ [key]: value }); 
    } 

    render() { 
    const {optionsMembers, optionsDays, value, member, day } = this.state 

    return (
     <Grid> 
     <Grid.Column width={6}> 
      <Dropdown 
      selection 
      options={optionsMembers} 
      value={member} 
      placeholder='Select Member' 
      onChange={(e,{value})=>this.handleChange(value, 'member')} 
      /> 
     </Grid.Column> 
     <Grid.Column width={6}> 
      <Dropdown 
      selection 
      options={optionsDays} 
      value={day} 
      placeholder='Select Day' 
      onChange={(e,{value})=>this.handleChange(value, 'day')} 
      /> 
     </Grid.Column> 
     <Grid.Column width={4}> 
      <div>{member}</div> 
      <div>{day}</div> 
     </Grid.Column> 
     </Grid> 
    ) 
    } 
} 

export default DropdownExampleRemote 

Answer 2

何かを。ラインはおそらくあなたのために働くことができます。

handleChange = (propName, e) => { 
    let state = Object.assign({}, state); 
    state[propName] = e.target.value; 
    this.setState(state) 
} 

更新するプロパティの名前を渡して、カッコ表記を使用して状態のその部分を更新することができます。

これが役に立ちます。