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

Question

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

Вот ссылка из Material-UI для построения множественного выбора:

https://codesandbox.io/s/sr6pf

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

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

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

Спасибо,

Answer 1

По некоторым причинам мне удалось найти решение для моего собственного вопроса.Правильный ответ - создать пользовательский компонент 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;

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