Как обработать изменение ввода для Dropdown-объекта semantic-ui-Reaction в форме, не создавая несколько обработчиков? - PullRequest
Новая
       15

Как обработать изменение ввода для Dropdown-объекта semantic-ui-Reaction в форме, не создавая несколько обработчиков?

0 голосов
/ 17 мая 2018

объект раскрывающегося списка semantic-ui-реагирует не принимает атрибут имени или идентификатора, и поэтому изменение не может быть обработано так же, как и другие элементы формы. Документы показывают это: 

<code>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}
) } }

при объединении входных данных в один обработчик событий нет простого способа извлечь идентификатор, чтобы обновить состояние раскрывающегося списка. как это обычно обрабатывается?

спасибо

1 Ответ

0 голосов
/ 17 мая 2018

Один из вариантов - использовать простую обертку (не обязательно раздутую) над различными элементами управления вводом, чтобы даже при изменении библиотеки элементов управления мы имели ограниченную область изменения. Ниже приведен простой пример такой оболочки и показан простой подход к использованию одного и того же обработчика изменения значения для нескольких полей (даже для разных типов элементов управления вводом): 

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'));

Рабочий пример

...