如何使用 react-hook-forms 制作动态 watch()/usewatch()

Question

我遇到了一个问题，我需要从模式生成一个表单，并且具有相互依赖的字段，例如 enabled/disable show/hide 等

我的架构看起来像这样。

  contractorInformation: {
    title: "ContractorInformation",
    type: "object",
    properties: {
      contractorName: {
        title: "Contractor Name",
        type: "string",
        ui: "input",
        constraints: {
          required: true
        }
      },
      contractorFavouriteAnimal: {
        title: "Contractor Favourite Animal",
        type: "string",
        ui: "input",
        constraints: {},
        dependencies: {
          disabled: true,
          watching: "contractorName"
          // //disabled={!fullName || fullName.length === 0 || errors.fullName}
        }
      },
      contractorEmail: {
        title: "Contractor Email",
        type: "string",
        ui: "input",
        constraints: {
          common: 10
        }
      }
    }
  },
  agencyInformation: {
    title: "ContractorInformation",
    type: "object",
    properties: {
      contractorName: {
        title: "Contractor Name",
        type: "string",
        ui: "input",
        constraints: {
          required: true,
          minLength: 3,
          maxLength: 5
        },
        dependencies: {
          disabled: true,
          watching: "agencyName"
          
        }
      }
    }
  }
}

const watchThese = watch() 将允许我观看所有内容，但如果我想将此字段从禁用更改为启用，我可以使用 <input disabled={!watchThese || watchThese.length === 0 || watchThese.fullName}/> 它有效，但显然是由每个字段触发的。

我如何从模式生成动态 watch()/useWatch() 并能够访问我需要 enable/disable 输入的特定依赖项。

如有任何帮助，我们将不胜感激。

Answer 1

为了将来参考，我使用

解决了它

export const FormField = () => 

{Object.entries(schema?.actions ?? {}).forEach(([key, value]) => value(watch(key)));

return (<div></div>)}

并更新架构以匹配。

如何使用 react-hook-forms 制作动态 watch()/usewatch()

How to make a dynamic watch()/usewatch() with react-hook-forms

watch

reactjs

react-hook-form