管理React（語義UI）中多個下拉菜單的狀態

我正在關注文檔here以創建受控組件下拉菜單。管理React（語義UI）中多個下拉菜單的狀態

我如何能夠修改我的handleChange函數，使其知道它從'Select Member'下拉列表或'Select Day'下拉列表中接收到一個值，以便我可以相應地更新狀態值（「成員「和」小時）

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：。 解決方案一直在努力更新狀態仍然不知道爲什麼投寄箱的選擇不沾，默認爲佔位符

來源

2017-07-17 Avremel Kaminetzky

我建議傳入值的名稱你想更新到手柄變更功能，例如：

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

來源

2017-07-18 00:12:13 Rachel613

的onChange = {（E，{}值）=> this.handleChange（值，'day'）}需要像早期版本那樣（e，value，'day'）。 –

@Avremel我刪除它，因爲句柄更改函數根本不需要該事件。我也將它從處理更改所需的參數中移除 – Rachel613

難題，並且謝謝 –

沿着這些東西線可能會爲你工作

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

您可以傳遞要更新的屬性的名稱，然後使用括號表示法來更新狀態的那部分。

希望這會有所幫助。

來源

2017-07-18 00:08:40

管理React（語義UI）中多個下拉菜單的狀態

回答

相關問題