道具

名称		类型	描述
`name`		`string`	按名称定位单个字段。在使用字段数组时。您可以使用诸如 `replace` 或 `update` 用于字段数组，但是，它们会导致组件为目标字段数组卸载和重新安装。 const { update } = useFieldArray({ name: 'array' }); // unmount fields and remount with updated value update(0, { test: '1', test1: '2' }) // will directly update input value setValue('array.0.test1', '1'); setValue('array.0.test2', '2'); 在定位不存在的字段时，它不会创建新字段。 const { replace } = useFieldArray({ name: 'test' }) // ❌ doesn't create new input setValue('test.101.data') // ✅ work on refresh entire field array replace([{data: 'test'}])
`value`		`unknown`	该字段的值。此参数是必需的，不能为`undefined`。
`选项`	`shouldValidate`	`boolean`	是否计算您的输入是否有效（订阅于 `errors`). 是否计算您的整个表单是否有效（订阅于 `isValid`). 此选项将在指定字段级别更新`touchedFields`，不会更新整个表单的已触摸字段。 setValue('name', 'value', { shouldValidate: true })
	`shouldDirty`	`boolean`	是否计算您的输入相对于您的默认值是否脏（订阅于 `dirtyFields`). 是否计算您的整个表单相对于您的默认值是否脏（订阅于 `isDirty`). 此选项将在指定字段级别更新`dirtyFields`，不会更新整个表单的脏字段。 setValue('name', 'value', { shouldDirty: true })
	`shouldTouch`	`boolean`	是否将输入本身设置为已触摸。 setValue('name', 'value', { shouldTouch: true })

规则

只有以下情况才会触发重新渲染
- 当错误由值更新触发或纠正时
- 当setValue导致状态更新时，例如脏和已触摸。

建议以字段名称为目标，而不是将第二个参数设为嵌套对象。

setValue('yourDetails.firstName', 'value'); // ✅ performant
setValue('yourDetails', { firstName: 'value' }); // less performant

register('nestedValue', { value: { test: 'data' } }); // register a nested value input
setValue('nestedValue.test', 'updatedData'); // ❌ failed to find the relevant field
setValue('nestedValue', { test: 'updatedData' } ); // ✅ setValue find input and update

建议在调用 setValue之前注册输入的名称。为了更新整个字段数组，请确保首先执行useFieldArray钩子。

重要: 使用 replace 来自useFieldArray，使用setValue更新整个字段数组将在下一个主要版本中删除。

// you can update an entire Field Array,
setValue('fieldArray', [{ test: '1' }, { test: '2' }]); // ✅

// you can setValue to a unregistered input
setValue('notRegisteredInput', 'value'); // ✅ prefer to be registered

// the following will register a single input (without register invoked)
setValue('resultSingleNestedField', { test: '1', test2: '2' }); // 🤔

// with registered inputs, the setValue will update both inputs correctly.
register('notRegisteredInput.test', '1')
register('notRegisteredInput.test2', '2')
setValue('notRegisteredInput', { test: '1', test2: '2' }); // ✅ sugar syntax to setValue twice

示例

CodeSandbox ^JS

import { useForm } from "react-hook-form";

const App = () => {
  const { register, setValue } = useForm();
  
  return (
    <form>
      <input {...register("firstName")} />
      <button type="button" onClick={() => setValue("firstName", "Bill")}>
        setValue
      </button>
      <button
        type="button"
        onClick={() =>
          setValue("lastName", "firstName", {
            shouldValidate: true,
            shouldDirty: true
          })
        }
      >
        setValue options
      </button>
    </form>
  );
};

视频

以下视频教程演示了setValueAPI 详细介绍。

感谢您的支持

如果您发现 React Hook Form 在您的项目中很有用，请考虑为其加星并提供支持。