如何用单一处理器处理表单中semantic-ui-react Dropdown的输入变更？

Great question! I’ve run into this exact issue with Semantic UI React’s Dropdown component before—since it doesn’t handle name or id props the same way native form inputs do, managing multiple dropdowns with a single change handler takes a small workaround. Here are the most common, straightforward solutions:

1. Wrap the onChange Handler to Pass a Custom Identifier #

This is the most flexible approach, giving you full control over how you label each dropdown. You can wrap the onChange callback in an arrow function that passes a unique key directly to your handler, so you always know which dropdown triggered the change.

import React, { Component } from 'react'
import { Dropdown, Grid } from 'semantic-ui-react'

const options = [
  { key: 1, text: 'One', value: 1 },
  { key: 2, text: 'Two', value: 2 },
  { key: 3, text: 'Three', value: 3 },
]

export default class MultipleDropdowns extends Component {
  state = {
    dropdownValues: {
      firstDropdown: null,
      secondDropdown: null
    }
  }

  handleChange = (dropdownKey, e, { value }) => {
    this.setState(prevState => ({
      dropdownValues: {
        ...prevState.dropdownValues,
        [dropdownKey]: value
      }
    }))
  }

  render() {
    const { dropdownValues } = this.state

    return (
      <Grid columns={2}>
        <Grid.Column>
          <Dropdown
            onChange={(e, data) => this.handleChange('firstDropdown', e, data)}
            options={options}
            placeholder='First dropdown'
            selection
            value={dropdownValues.firstDropdown}
          />
        </Grid.Column>
        <Grid.Column>
          <Dropdown
            onChange={(e, data) => this.handleChange('secondDropdown', e, data)}
            options={options}
            placeholder='Second dropdown'
            selection
            value={dropdownValues.secondDropdown}
          />
        </Grid.Column>
      </Grid>
    )
  }
}

2. Use a Custom name Prop (Even If Not Rendered to DOM) #

While Semantic UI React’s Dropdown doesn’t render the name prop to the underlying DOM element, you can still pass it as a component prop—and it will be included in the second argument of the onChange callback. This keeps your code consistent with native form input patterns.

import React, { Component } from 'react'
import { Dropdown, Grid } from 'semantic-ui-react'

const options = [
  { key: 1, text: 'One', value: 1 },
  { key: 2, text: 'Two', value: 2 },
  { key: 3, text: 'Three', value: 3 },
]

export default class MultipleDropdowns extends Component {
  state = {
    dropdownValues: {
      first: null,
      second: null
    }
  }

  handleChange = (e, { name, value }) => {
    this.setState(prevState => ({
      dropdownValues: {
        ...prevState.dropdownValues,
        [name]: value
      }
    }))
  }

  render() {
    const { dropdownValues } = this.state

    return (
      <Grid columns={2}>
        <Grid.Column>
          <Dropdown
            name="first"
            onChange={this.handleChange}
            options={options}
            placeholder='First dropdown'
            selection
            value={dropdownValues.first}
          />
        </Grid.Column>
        <Grid.Column>
          <Dropdown
            name="second"
            onChange={this.handleChange}
            options={options}
            placeholder='Second dropdown'
            selection
            value={dropdownValues.second}
          />
        </Grid.Column>
      </Grid>
    )
  }
}

3. Leverage data-* Attributes from the Event Target #

If you need the identifier to exist in the DOM (for accessibility, testing, or other reasons), add a data-* attribute to the Dropdown and extract it from the event target in your handler.

import React, { Component } from 'react'
import { Dropdown, Grid } from 'semantic-ui-react'

const options = [
  { key: 1, text: 'One', value: 1 },
  { key: 2, text: 'Two', value: 2 },
  { key: 3, text: 'Three', value: 3 },
]

export default class MultipleDropdowns extends Component {
  state = {
    dropdownValues: {
      first: null,
      second: null
    }
  }

  handleChange = (e, { value }) => {
    const dropdownKey = e.target.dataset.dropdownKey
    this.setState(prevState => ({
      dropdownValues: {
        ...prevState.dropdownValues,
        [dropdownKey]: value
      }
    }))
  }

  render() {
    const { dropdownValues } = this.state

    return (
      <Grid columns={2}>
        <Grid.Column>
          <Dropdown
            data-dropdown-key="first"
            onChange={this.handleChange}
            options={options}
            placeholder='First dropdown'
            selection
            value={dropdownValues.first}
          />
        </Grid.Column>
        <Grid.Column>
          <Dropdown
            data-dropdown-key="second"
            onChange={this.handleChange}
            options={options}
            placeholder='Second dropdown'
            selection
            value={dropdownValues.second}
          />
        </Grid.Column>
      </Grid>
    )
  }
}

Quick Recommendation #

All these methods work reliably, but the second approach (using a custom name prop) is usually the cleanest and most consistent with how you’d handle native form inputs. It keeps your handler logic simple and avoids extra wrapper functions.

内容的提问来源于stack exchange，提问作者user7229669