Simpan nilai yang dipilih dalam kumpulan butang dalam keadaan bentuk cangkuk tindak balas

Question

Saya cuba menyimpan nilai yang dipilih dalam kumpulan butang MUI kepada keadaan bentuk react-hook, tetapi saya menghadapi beberapa masalah - nilai tidak dikemas kini dengan betul.

pautan kotak pasir kod di sini

Ini ialah versi generik kod saya:

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

Saya menggunakan setValue('selectedOption', option) tetapi tidak pasti sama ada ini adalah amalan yang baik.

Masalah yang saya hadapi ialah apabila saya mengklik butang dalam kumpulan butang, saya mahu nilai SelectOption dalam keadaan borang dikemas kini dengan nilai butang yang diklik. Walau bagaimanapun, kaedah getValues ​​nampaknya tidak menggambarkan keadaan yang dikemas kini.

Apa yang mungkin berlaku di sini? Bagaimanakah saya boleh berjaya mengemas kini dan mendapatkan semula nilai Opsyen yang dipilih apabila butang dalam kumpulan butang diklik?

Terima kasih terlebih dahulu atas bantuan anda!

Answer 1

Anda perlu menggunakan komponen FormProvider 与 useFormContext 如果您不想将上下文作为道具传递给您的Form. (Saya fikir anda mahu melakukan ini dengan melihat contoh).

Dari useFormContext Dokumentasi:

Contohnya:

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

  ...
};

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