Передача значения в состояние с помощью ответного выбора - PullRequest
Новая
       5

Передача значения в состояние с помощью ответного выбора

0 голосов
/ 04 марта 2020

Я новичок, чтобы реагировать и пытаться учиться самостоятельно. Я начал использовать response-select, чтобы создать раскрывающийся список в форме, и теперь я пытаюсь передать значение выбранного параметра. Мое состояние выглядит следующим образом. 

this.state = {
  part_id: "",
  failure: ""
};

Тогда в моем рендере 

const {
  part_id,
  failure
} = this.state;

Моя форма выглядит так: 2 поля 

<FormGroup>
  <Label for="failure">Failure</Label>
  <Input
    type="text"
    name="failure"
    placeholder="Failure"
    value={failure}
    onChange={this.changeHandler}
    required
    />
  </FormGroup>
  <FormGroup>
  <Label for="part_id">Part</Label>
  <Select
    name="part_id"
    value={part_id}
    onChange={this.changeHandler}
    options={option}
  />
  </FormGroup>

changeHandler выглядит следующим образом 

changeHandler = e => {
  this.setState({ [e.target.name]: e.target.value });
};

Обработчик изменений отлично работает для ввода, но ошибка выбора выдает сообщение о невозможности прочитать имя свойства. Я просмотрел документы по API и придумал что-то подобное для Select onChange 

onChange={part_id => this.setState({ part_id })}

, который устанавливает part_id в качестве метки, пары значений. Есть ли способ получить только значение? а также как я могу реализовать то же самое с multiselect?

Ответы [ 2 ]

2 голосов
/ 04 марта 2020

Возвращение события react-select onChange и значения реквизитов имеют следующий тип:

Событие / значение : 

null | {value: string, label: string} | Array<{value: string, label: string}>

Так в чем же ошибка Это означает, что вы не можете найти атрибут NULL (не выбран) или любые атрибуты с именами name (вам нужно value или label)

Для множественного выбора возвращается подпрограмма список вариантов.

Вы можете найти соответствующую информацию в их документе 

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' },
];

Обновление

Для вашей ситуации (один выбор)

  • опция с указанным выше типом 
const option = [
  {value: '1', label: 'name1'},
  {value: '2', label: 'name2'}
]
  • сохранение состояния выбрано value как id
changeHandler = e => {
  this.setState({ part_id: e ? e.value : '' });
};
  • выбрать выбранный элемент опции с помощью сохраненного id
  <Select
    name="part_id"
    value={option.find(item => item.value === part_id)}
    onChange={this.changeHandler}
    options={option}
  />

Для нескольких вариантов выбора

  • сохранить состояние как массив идентификаторов 
changeHandler = e => {
  this.setState({ part_id: e ? e.map(x => x.value) : [] });
};
  • выбрать через фильтр 
  <Select
    isMulti // Add this props with value true
    name="part_id"
    value={option.filter(item => part_id.includes(item.value))}
    onChange={this.changeHandler}
    options={option}
  />
0 голосов
/ 04 марта 2020

onChange Функция немного отличается в react-select

Она передает массив выбранных значений, вы можете получить первое, например 

 onChange={([selected]) => {
    // React Select return object instead of value for selection
    // return { value: selected };
    setValue(selected)
 }}
...