Speichern Sie den ausgewählten Wert in der Schaltflächengruppe im React-Hook-Form-Zustand

Question

Ich versuche, den ausgewählten Wert in einer MUI-Schaltflächengruppe im Status eines React-Hook-Formulars zu speichern, aber ich habe einige Probleme – der Wert wird nicht korrekt aktualisiert.

Codesandbox-Link hier

Dies ist eine generische Version meines Codes:

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>
      )}
    />
  )
}

Ich habe setValue('selectedOption', option) verwendet, bin mir aber nicht sicher, ob dies eine gute Vorgehensweise ist.

Das Problem, mit dem ich konfrontiert bin, besteht darin, dass ich möchte, dass der selectedOption-Wert im Formularstatus mit dem Wert der angeklickten Schaltfläche aktualisiert wird, wenn ich auf eine Schaltfläche in der Schaltflächengruppe klicke. Die getValues-Methode scheint jedoch nicht den aktualisierten Status widerzuspiegeln.

Was könnte hier schief gehen? Wie kann ich den selectedOption-Wert erfolgreich aktualisieren und abrufen, wenn auf eine Schaltfläche in einer Schaltflächengruppe geklickt wird?

Vielen Dank im Voraus für Ihre Hilfe!

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