React Hook Form 与 MUI Toggle Group答案

【问题标题】：React Hook Form with MUI Toggle GroupReact Hook Form 与 MUI Toggle Group
【发布时间】：2020-09-24 21:54:35
【问题描述】：

我正在尝试将 MUI 切换组与 React Hook Form 一起使用，但是在提交表单时我无法获得要发布的值。我的切换组组件如下所示：

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

【解决方案1】：

我的解决方法是使用效果手动设置值，使用 setValue，然后在 handleSubmit 函数中使用 getValues() 来获取值。

const { control, setValue } = props;

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

【讨论】：