在react-hook-form状态下存储按钮组中的选定值

Question

我尝试将 MUI 按钮组中的选定值保存到react-hook-form 的状态，但遇到一些问题 - 该值未正确更新。

codesandbox 链接在这里

这是我的代码的通用版本：

import { ButtonGroup, Button } from '@mui/material'
import { useForm, Controller } from 'react-hook-form'

export default function MyComponent() {
  const { control, setValue, getValues } = useForm()

  const options = ['Option1', 'Option2', 'Option3']

  return (
    <Controller
      name="selectedOption"
      control={control}
      render={({ field }) => (
        <ButtonGroup>
          {options.map((option) => {
            return (
              <Button
                key={option}
                variant={field.value === option ? 'contained' : 'outlined'}
                onClick={() => {
                  setValue('selectedOption', option)  {/* this trick didn't work */}
                }}
              >
                {option}
              </Button>
            )
          })}
        </ButtonGroup>
      )}
    />
  )
}

我使用了setValue('selectedOption', option)，但不确定这是否是一个很好的做法。

我面临的问题是，当我单击按钮组中的按钮时，我希望表单状态中的 selectedOption 值更新为单击按钮的值。但是，getValues 方法似乎没有反映更新后的状态。

这里可能出现什么问题？当单击按钮组中的按钮时，如何成功更新和检索 selectedOption 值？

预先感谢您的帮助！

Answer 1

您将需要使用FormProvider 与 useFormContext 如果您不想将上下文作为道具传递给您的Form组件。 （我认为您希望通过查看示例来做到这一点）。

来自 useFormContext 文档：

例如：

export default function MyComponent() {
  const methods = useForm();

  return (
    {/* Add FormProvider with useForm return props */}
    <FormProvider {...methods}>

      ...

    </FormProvider>
  );
}

const Form = () => {
  // Retrieve your setter/getter functions from useFormContext
  const { control, setValue, getValues } = useFormContext();
  const options = ["Option1", "Option2", "Option3"];

  ...
};

工作 CodeSandbox： https://codesandbox.io/s/react-hook-form-no-props-kngps3?file=/src/Form.jsx