Подключите Material-ui ToggleButtonGroup к redux-form - PullRequest
Новая
       185

Подключите Material-ui ToggleButtonGroup к redux-form

0 голосов
/ 14 июля 2020

Я пытаюсь подключить material-ui ToggleButtonGroup с формой redux и получаю проблемы с этим. Вот мой код: 

<Field
  name='operator'
  component={FormToggleButtonGroup}
>
  <ToggleButton value='equals'>Equal</ToggleButton>
  <ToggleButton value='not_equals'>Not equal</ToggleButton>
</Field>

.. и мой компонент, переданный в поле: 


const FormToggleButtonGroup = (props) => {
  const {
    input,
    meta,
    children
  } = props;

  return (
    <ToggleButtonGroup
      {...input}
      touched={meta.touched.toString()}
    >
      {children}
    </ToggleButtonGroup>
  );
};

export default FormToggleButtonGroup;

проблема в том, что когда я выбираю значение (параметр переключения), выбранное значение не передается в хранилище redux, он передается только после потери фокуса, а затем выдает ошибку «newValue.splice не является функцией» Пожалуйста, помогите разобраться с этой проблемой

Песочница с примером кода

1 Ответ

0 голосов
/ 17 июля 2020

Играя с компонентом, я наконец нашел решение. Мне нужно вручную присвоить новое значение, полученное из компонента ToggleButtonGroup, и поместить это значение в хранилище redux. Вот как выглядит рабочий код: 

const FormToggleButtonGroup = (props) => {
  const {
    input,
    meta,
    children,
    ...custom
  } = props;

  const { value, onChange } = input;
  return (
    <ToggleButtonGroup
      {...custom}
      value={value}
      onChange={(_, newValue) => {
        onChange(newValue);
      }}
      touched={meta.touched.toString()}
    >
      {children}
    </ToggleButtonGroup>
  );
};

Основное изменение - получение функции redux onChange и вызов ее с новым значением, выбранным при переключении значения. Есть onChange, связанный с компонентом ToggleButtonGroup, и еще один onChange, связанный с Redux. Вам нужно вызвать последний, когда происходит onChange ToggleButtonGroup.

...