Форма React Hook с MUI Toggle Group

Я пытаюсь использовать группу переключения MUI с формой React Hook, однако я не могу получить значение для публикации при отправке формы. Компонент моей группы переключения выглядит так:

import FormatAlignCenterIcon from '@material-ui/icons/FormatAlignCenter';
import FormatAlignLeftIcon from '@material-ui/icons/FormatAlignLeft';
import FormatAlignRightIcon from '@material-ui/icons/FormatAlignRight';
import FormatAlignJustifyIcon from '@material-ui/icons/FormatAlignJustify';
import ToggleButton from '@material-ui/lab/ToggleButton';
import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
import React from 'react';
import {Controller} from "react-hook-form";

export default function TestToggleGroup(props) {
  const {control} = props;
  const [alignment, setAlignment] = React.useState('left');

  const handleAlignment = (event) => {
    setAlignment(event[1]);
  };

  return (
      <Controller
          name="ToggleTest"
          as={
            <ToggleButtonGroup
                value={alignment}
                exclusive
                onChange={handleAlignment}
                aria-label="text alignment"
            >
              <ToggleButton value="left" aria-label="left aligned" key="left">
                <FormatAlignLeftIcon/>
              </ToggleButton>
              <ToggleButton value="center" aria-label="centered" key="center">
                <FormatAlignCenterIcon/>
              </ToggleButton>
              <ToggleButton value="right" aria-label="right aligned" key="right">
                <FormatAlignRightIcon/>
              </ToggleButton>
              <ToggleButton value="justify" aria-label="justified" disabled key="justify">
                <FormatAlignJustifyIcon/>
              </ToggleButton>
            </ToggleButtonGroup>
          }
          value={alignment}
          onChange={(e) => {
            handleAlignment(e);
          }}
          valueName={"alignment"}
          control={control}
      />
  );
}

Не уверен, что именно я делаю неправильно, но любая помощь будет принята с благодарностью.


material-ui react-hook-form
person Raythe    schedule 05.06.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Мое обходное решение заключалось в использовании эффекта для ручной установки значения с помощью setValue, а затем с использованием getValues() внутри вашей handleSubmit функции для получения значений.

const { control, setValue } = props;

//Effect
React.useEffect(() => {
  setAlignment('ToggleTest', alignment);
}, [alignment, setAlignment]);
person David    schedule 07.06.2020