管理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）中多个下拉菜单的状态

回答

相关问题