форма реакции-финала с множественным выбором

Я пытаюсь создать форму с компонентом Select с несколькими значениями с помощью Material-UI, используя response-final-form. Каким-то образом с одним Select я могу получить значение, но с несколькими, это не так. Почему-то кажется, что react-final-form сохраняет свою ценность внутри.

Вот направляющая ссылка из Material-UI для создания нескольких Select:

https://codesandbox.io/s/sr6pf

Я попытался воспроизвести самый первый пример (без использования перехвата реакции) в своей форме, но все равно что-то упустил?

https://codesandbox.io/embed/react-final-form-material-ui-example-jfmoe

Что я должен добавить в свой компонент, чтобы эта работа заработала?

Спасибо,


reactjs select react-final-form
person Duc Hong    schedule 11.06.2019    source источник
comment
Может быть, открыть вопрос по final-form-material-ui? github.com/Deadly0/final-form-material-ui/issues/ новый   -  person Erik R.    schedule 13.06.2019
comment
@ErikR. спасибо за напоминание, я нашел решение для моего собственного вопроса, и это довольно странно, интересно, должен ли я добавить свой собственный ответ   -  person Duc Hong    schedule 13.06.2019
comment
Да, я сбился со счета, сколько раз мне помогали ответы на свои вопросы. Сделайте это, потому что у кого-то будет такая же проблема.   -  person Erik R.    schedule 14.06.2019

Ответы (2)


arrow_upward
2
arrow_downward

По некоторым причинам мне удалось найти решение моего собственного вопроса. Правильный ответ - создать собственный компонент MultiSelect вместо повторного использования компонента из final-form-material-ui.

Примечания: Я пытался использовать <Select /> из final-form-material-ui, но добавление multiple prop к компоненту не будет передано, это странно.

Итак, мой пользовательский компонент будет выглядеть так, почти аналогично компоненту из их github с добавленным multiple prop.

import React from 'react';
import FormControl from '@material-ui/core/FormControl';
import FormHelperText from '@material-ui/core/FormHelperText';
import InputLabel from '@material-ui/core/InputLabel';
import Select from '@material-ui/core/Select';

function SelectMulti({
  input: { name, value, onChange, ...restInput },
  meta,
  label,
  formControlProps,
  ...rest
}) {
  const showError =
    ((meta.submitError && !meta.dirtySinceLastSubmit) || meta.error) &&
    meta.touched;

  return (
    <FormControl {...formControlProps} error={showError}>
      <InputLabel htmlFor={name} shrink>
        {label}
      </InputLabel>
      <Select
        {...rest}
        multiple
        name={name}
        value={value}
        onChange={onChange}
        inputProps={restInput}
      />
      {showError && (
        <FormHelperText>{meta.error || meta.submitError}</FormHelperText>
      )}
    </FormControl>
  );
}

SelectMulti.propTypes = {};

export default SelectMulti;

Надеюсь, это поможет кому-то в будущем

person Duc Hong    schedule 18.06.2019
comment
В моем случае это помогло, только одно добавление - изменено value={value} на value={value || []}, потому что в противном случае оно генерировало исключение, если значение было пустой строкой. - person DTT; 11.12.2019

arrow_upward
1
arrow_downward

Я смог решить эту проблему, установив fomat как таковой

<Field
 name="concepts"
 component={Select}
 displayEmpty={trie}
 multiple={true}
 value={[]}
 format={value => value || []}
 />

Согласно https://github.com/erikras/redux-form-material-ui/issues/212#issuecomment-358376925

person ShahNewazKhan    schedule 02.01.2020