代码之家 › 专栏 › 技术社区 › Avi Kaminetzky

管理React(语义用户界面)中多个下拉菜单的状态

semantic-ui-react reactjs

Avi Kaminetzky · 技术社区 · 9 年前

我如何修改handleChange函数,使其知道它正在从“Select Member”下拉列表或“Select Day”下拉列表中接收值,以便我可以相应地更新状态值(“Member”和“hour”?

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

更新: 解决方案已用于更新状态。仍然不确定为什么dropbox的选择没有粘附并且默认为占位符。

2 回复 | 直到 6 年前

Rachel613 9 年前

我建议将要更新的值的名称传递到句柄更改函数中,例如:

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

Chaim Friedman 9 年前

这方面的东西可能对你有用。

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