How to handle input change for semantic-ui-react Dropdown object in a form without creating multiple handlers?

Question

the semantic-ui-react Dropdown object does not accept a name or id attribute, and therefore the change cannot be handled in the same way as other form elements. the docs show this:

import React, { Component } from 'react'
import { Dropdown, Grid, Segment } 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 DropdownExampleControlled extends Component {
  state = {}

  handleChange = (e, { value }) => this.setState({ value })

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

    return (
      <Grid columns={2}>
        <Grid.Column>
          <Dropdown
            onChange={this.handleChange}
            options={options}
            placeholder='Choose an option'
            selection
            value={value}
          />
        </Grid.Column>
        <Grid.Column>
          <Segment secondary>
            <pre>Current value: {value}</pre>
          </Segment>
        </Grid.Column>
      </Grid>
    )
  }
}

when combining inputs into a single event handler, there's no tidy way to pull out an identifier to update the state for the dropdown. how is this normally handled?

thanks

AjayK · Accepted Answer · 2018-05-17 02:06:22Z

One option is to use a simple wrapper(not unnecessary bloated) over different input controls, so that even if we change a control library we will have limited change scope. Below is simple example of such wrapper, and shows a simple approach to use same value change handler for multiple fields (even for different type of input controls):

import React, { Component } from 'react';
import { render } from 'react-dom';

const FIELD_NAMES = {
  FirstName: 'FirstName',
  LastName: 'LastName',
};

const TEXT_CONTAINER_STYLE = { padding: 5 };
function MyTextInput(props) {
  const {
    name,
    onChange,
    value,
  } = props;

  function handleValueChange(e) {
    onChange(name, e.target.value);
  }
  return (
    <div style={TEXT_CONTAINER_STYLE}>
      <input onChange={handleValueChange} value={props.value} />
    </div>
  );
}
class App extends Component {
  constructor() {
    super();
    this.state = {
    };
    this.state[FIELD_NAMES.FirstName] = '';
    this.state[FIELD_NAMES.LastName] = '';
  }

  handleValueChange = (fieldName, fieldValue) => {
    if (fieldName) {
      let newState = {};
      switch (fieldName) {
        case FIELD_NAMES.FirstName:
          newState[FIELD_NAMES.FirstName] = fieldValue;
          break;
        case FIELD_NAMES.LastName:
          newState[FIELD_NAMES.LastName] = fieldValue;
          break;
      }
      this.setState(newState);
    }
  }
  getFieldValue = (fieldName) => {
    return this.state[fieldName]
  }
  render() {
    return (
      <div>
        <MyTextInput
          name={FIELD_NAMES.FirstName}
          value={this.getFieldValue(FIELD_NAMES.FirstName)}
          onChange={this.handleValueChange}
        />
        <MyTextInput
          name={FIELD_NAMES.LastName}
          value={this.getFieldValue(FIELD_NAMES.LastName)}
          onChange={this.handleValueChange}
        />
        <div>
          {`First Name : ${this.getFieldValue(FIELD_NAMES.FirstName)}`}
        </div>
        <div>
          {`Last Name : ${this.getFieldValue(FIELD_NAMES.LastName)}`}
        </div>
      </div >
    );
  }
}

render(<App />, document.getElementById('root'));

Working example

Collectives™ on Stack Overflow

How to handle input change for semantic-ui-react Dropdown object in a form without creating multiple handlers?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related