在react-hook-form狀態下儲存按鈕組中的選取值
P粉106715703
P粉106715703 2023-09-08 18:17:15
0
1
528

我嘗試將 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 值?

預先感謝您的幫忙!

P粉106715703
P粉106715703

全部回覆(1)
P粉465287592

您將需要使用FormProvider a> 與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

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!