在 React 中管理多个下拉列表的状态（语义-UI）

Question

我正在按照文档 here 创建受控组件下拉菜单。

我如何才能修改我的 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

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

Answer 1

这些方面的内容可能对您有用。

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

您可以传入要更新的属性的名称，然后使用括号表示法更新您的那部分状态。

希望对您有所帮助。

Answer 2

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

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

在 React 中管理多个下拉列表的状态（语义-UI）

Manage state of multiple Dropdown's in React (Semantic-UI)

reactjs

semantic-ui-react