2

I am following the docs here to create a controlled component dropdown menu.

How would I be able to modify my handleChange function to make it aware that it is receiving a value from the 'Select Member' dropdown or the 'Select Day' dropdown, so that I can update the state values accordingly ("member" and "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

UPDATE: Solution has worked to update state. Still not sure why the selection of dropbox doesn't stick and defaults to placeholder.

4

2 回答 2

4

I would recommend passing in the name of the value you would like to update into the handle change function, for example:

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-18T00:12:13.577 回答
1

Something along these lines can maybe work for you.

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

You can pass in the name of the property you want to update and then use bracket notation to update that part of your state.

Hope this helps.

于 2017-07-18T00:08:40.710 回答