react-hooks-form 中defalutValue 的值的设置跟获取

在使用 react-hook-form 时，你可以通过 useForm hook 的 defaultValues 属性设置默认值，并通过 watch 或 getValues 方法获取表单字段的当前值。下面是一个示例展示如何设置和获取默认值。

安装 react-hook-form

首先，确保你已经安装了 react-hook-form：

sh
复制代码
npm install react-hook-form

设置默认值和获取当前值

下面是一个完整的示例，展示如何在 react-hook-form 中设置默认值并获取当前值。

jsx
复制代码
import React from 'react';
import { useForm, Controller } from 'react-hook-form';
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';

function MyForm() {
  // 使用 useForm 初始化表单
  const { control, handleSubmit, watch, getValues } = useForm({
    defaultValues: {
      firstName: 'John',
      lastName: 'Doe',
    },
  });

  // 获取当前表单字段值
  const firstName = watch('firstName');
  const lastName = watch('lastName');

  const onSubmit = (data) => {
    console.log('Form Data:', data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="firstName"
        control={control}
        render={({ field }) => (
          <TextField
            {...field}
            label="First Name"
            variant="outlined"
            fullWidth
            margin="normal"
          />
        )}
      />
      <Controller
        name="lastName"
        control={control}
        render={({ field }) => (
          <TextField
            {...field}
            label="Last Name"
            variant="outlined"
            fullWidth
            margin="normal"
          />
        )}
      />
      <Button type="submit" variant="contained" color="primary">
        Submit
      </Button>

      <div>
        <h3>Current Values</h3>
        <p>First Name: {firstName}</p>
        <p>Last Name: {lastName}</p>
      </div>
    </form>
  );
}

export default MyForm;

关键点说明

1. defaultValues：在 useForm 中设置初始值。

   jsx
   复制代码
   const { control, handleSubmit, watch, getValues } = useForm({
     defaultValues: {
       firstName: 'John',
       lastName: 'Doe',
     },
   });
   

2. Controller：使用 Controller 组件将表单字段与 react-hook-form 的控制器绑定。

   jsx
   复制代码
   <Controller
     name="firstName"
     control={control}
     render={({ field }) => (
       <TextField
         {...field}
         label="First Name"
         variant="outlined"
         fullWidth
         margin="normal"
       />
     )}
   />
   

3. watch：获取表单字段的当前值。

   jsx
   复制代码
   const firstName = watch('firstName');
   const lastName = watch('lastName');
   

4. getValues：获取表单的所有当前值。

   jsx
   复制代码
   const currentValues = getValues();
   console.log(currentValues);
   

5. handleSubmit：处理表单提交。

   jsx
   复制代码
   const onSubmit = (data) => {
     console.log('Form Data:', data);
   };
   

通过以上方法，你可以在 react-hook-form 中轻松设置和获取表单字段的默认值和当前值。