Stocker la valeur sélectionnée dans le groupe de boutons dans l'état de forme de crochet de réaction

Question

J'essaie de sauvegarder la valeur sélectionnée dans un groupe de boutons MUI dans l'état d'un formulaire de réaction-hook, mais j'ai quelques problèmes - la valeur ne se met pas à jour correctement.

lien codesandbox ici

Ceci est une version générique de mon code :

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

J'ai utilisé setValue('selectedOption', option) mais je ne sais pas si c'est une bonne pratique.

Le problème auquel je suis confronté est que lorsque je clique sur un bouton dans le groupe de boutons, je souhaite que la valeur selectedOption dans l'état du formulaire soit mise à jour avec la valeur du bouton cliqué. Cependant, la méthode getValues ​​​​ne semble pas refléter l'état mis à jour.

Qu'est-ce qui pourrait mal se passer ici ? Comment puis-je mettre à jour et récupérer avec succès la valeur selectedOption lorsque l’on clique sur un bouton d’un groupe de boutons ?

Merci d'avance pour votre aide !

Answer 1

Vous devrez utiliser le composant FormProvider 与 useFormContext 如果您不想将上下文作为道具传递给您的Form. (Je pense que vous voulez le faire en regardant des exemples).

De useFormContext Documentation :

Par exemple :

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"];

  ...
};

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