{"id":37931,"date":"2023-04-24T14:05:22","date_gmt":"2023-02-25T23:37:12","guid":{"rendered":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90react-js%e3%80%91%e5%85%b3%e4%ba%8ereact-hook-form\/"},"modified":"2024-04-30T01:05:56","modified_gmt":"2024-04-29T17:05:56","slug":"%e3%80%90react-js%e3%80%91%e5%85%b3%e4%ba%8ereact-hook-form","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90react-js%e3%80%91%e5%85%b3%e4%ba%8ereact-hook-form\/","title":{"rendered":"\u3010React.js\u3011\u5173\u4e8eReact Hook Form"},"content":{"rendered":"

 <\/p>\n

React Hook Form (\u4e2d\u6587\u7ffb\u8bd1)\uff1a\u54cd\u5e94\u5f0f\u94a9\u5b50\u8868\u5355<\/h1>\n

React Hook Form\u7684\u4f18\u70b9\u662f\u4ec0\u4e48\uff1f<\/h4>\n

\u901a\u8fc7\u5c06\u8868\u5355\u5b9e\u73b0\u4e3a\u201c\u975e\u53d7\u63a7\u7ec4\u4ef6\u201d\u800c\u4e0d\u662f\u201c\u53d7\u63a7\u7ec4\u4ef6\u201d\uff0c\u53ef\u4ee5\u5b9e\u73b0\u9ad8\u6027\u80fd\uff0c\u5373\u9632\u6b62\u4e0d\u5fc5\u8981\u7684\u91cd\u65b0\u6e32\u67d3\u548c\u5b9e\u73b0\u8868\u5355\u3002<\/p>\n

\u8bf7\u5c06\u4ee5\u4e0b\u5185\u5bb9\u7528\u4e2d\u6587\u8fdb\u884c\u91ca\u4e49\uff1a\u2193<\/p>\n

\u4e3a\u4e86\u5c06\u5176\u4f5c\u4e3a\u975e\u63a7\u5236\u7ec4\u4ef6\u8fdb\u884c\u5904\u7406\uff0c\u9700\u8981\u4f7f\u7528forwardRef\u3002<\/h4>\n

\u7531\u4e8eReact Hook Form\u9700\u8981\u901a\u8fc7\u975e\u53d7\u63a7\u7ec4\u4ef6\u7684ref\u76f4\u63a5\u8bbf\u95ee\u8868\u5355\u5143\u7d20\u7684\u503c\u3001\u7126\u70b9\u3001\u9519\u8bef\u72b6\u6001\u7b49\uff0c\u6545\u5fc5\u987b\u8fd9\u6837\u505a\u3002<\/p>\n

forwardRef \u662f\u4ec0\u4e48\u610f\u601d\uff1f<\/p>\n

forwardRef\u306fReact\u306e\u30d3\u30eb\u30c8\u30a4\u30f3\u95a2\u6570
\n\u3053\u306e\u95a2\u6570\u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u3067\u3001\u89aa\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304b\u3089\u6e21\u3055\u308c\u308bref\u3092\u5b50\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u5185\u90e8\u306eDOM\u8981\u7d20\u3084\u30af\u30e9\u30b9\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u306b\u76f4\u63a5\u95a2\u9023\u4ed8\u3051\u308b\u3053\u3068\u304c\u3067\u304d\u308b<\/p>\n

forwardRef\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u7b2c\u4e8c\u306e\u5f15\u6570\u3068\u3057\u3066ref\u3092\u53d7\u3051\u53d6\u308b\u65b0\u3057\u3044\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u4f5c\u6210\u3055\u308c\u308b<\/p>\n

\n

\u5b9e\u65bd\u65b9\u5f0f<\/h1>\n

\u4f7f\u7528forwardRef\u6765\u5b9e\u73b0\u8868\u5355<\/h2>\n
export<\/span> const<\/span> Input<\/span> =<\/span> \u2b50\ufe0f<\/span>forwardRef<\/span><<\/span>HTMLInputElement<\/span>,<\/span> Props<\/span>><\/span>(<\/span>\r\n  (<\/span>\r\n    {<\/span>\r\n      onChange<\/span>,<\/span>\r\n      placeholder<\/span>,<\/span>\r\n      disabled<\/span>,<\/span>\r\n      errorText<\/span>,<\/span>\r\n      unit<\/span>,<\/span>\r\n      unitSize<\/span> =<\/span> 1<\/span>,<\/span>\r\n      defaultValue<\/span> =<\/span> ''<\/span>,<\/span>\r\n      name<\/span>,<\/span>\r\n    },<\/span>\r\n    \/\/ \u95a2\u6570\u306e\u7b2c\u4e8c\u5f15\u6570\u3068\u3057\u3066\u89aa\u304b\u3089\u6e21\u3055\u308c\u308bref\u3002\u3053\u306eref\u3067input\u306e\u76e3\u8996\u3092\u884c\u3063\u3066\u3044\u308b<\/span>\r\n    forwardedRef<\/span> \u2b50\ufe0f<\/span>\r\n  )<\/span> =><\/span> {<\/span>\r\n    const<\/span> {<\/span> value<\/span>,<\/span> setInputValue<\/span> }<\/span> =<\/span> useInputValue<\/span>(<\/span>onChange<\/span>,<\/span> defaultValue<\/span>)<\/span>\r\n    return <\/span>(<\/span>\r\n      <<\/span>Input<\/span>.<\/span>Wrapper<\/span>\r\n        error<\/span>=<\/span>{<\/span>errorText<\/span>}<\/span>\r\n        classNames<\/span>=<\/span>{{<\/span>\r\n          error<\/span>:<\/span> '<\/span>text-red-500 text-xs mt-2 mb-4<\/span>'<\/span>,<\/span>\r\n        }}<\/span>\r\n      ><\/span>\r\n        <<\/span>Input<\/span>\r\n          classNames<\/span>=<\/span>{{<\/span>\r\n            input<\/span>:<\/span> ``<\/span>\r\n          }}<\/span>\r\n          \/\/ onChange: react-hook-form\u306eregister\u95a2\u6570\u304c\u53cd\u5fdc\u3059\u308b<\/span>\r\n          onChange<\/span>=<\/span>{(<\/span>e<\/span>)<\/span> =><\/span> {<\/span>\r\n            setInputValue<\/span>(<\/span>e<\/span>)<\/span>\r\n          }}<\/span>\r\n          placeholder<\/span>=<\/span>{<\/span>placeholder<\/span>}<\/span>\r\n          disabled<\/span>=<\/span>{<\/span>disabled<\/span>}<\/span>\r\n          ref<\/span>=<\/span>{<\/span>forwardedRef<\/span>}<\/span> \/\/ \u2b50\ufe0f<\/span>\r\n          value<\/span>=<\/span>{<\/span>value<\/span>}<\/span>\r\n          \/\/ error: react-hook-form\u306eerrors\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u4f7f\u7528\u3057\u3066\u30a8\u30e9\u30fc\u60c5\u5831\u3092\u53d6\u5f97\u3067\u304d\u308b<\/span>\r\n          error<\/span>=<\/span>{<\/span>errorText<\/span>}<\/span> \/\/ \u2b50\ufe0f<\/span>\r\n          \/\/ name: react-hook-form\u3067\u30c7\u30fc\u30bf\u3092\u8b58\u5225\u3059\u308b\u305f\u3081\u306e\u30ad\u30fc\u3068\u3057\u3066\u4f7f\u7528\u3055\u308c\u308b<\/span>\r\n          name<\/span>=<\/span>{<\/span>name<\/span>}<\/span> \/\/ \u2b50\ufe0f <\/span>\r\n          rightSection<\/span>=<\/span>{<\/span>unit<\/span> &&<\/span> <<\/span>Unit<\/span>><\/span>{<\/span>unit<\/span>}<\/span><<\/span>\/Unit><\/span>}\r\n<\/span>        \/><\/span>\r\n      <<\/span>\/Input.Wrapper<\/span>>\r\n<\/span>    )<\/span>\r\n  }<\/span>\r\n)<\/span>\r\n\r\nInput<\/span>.<\/span>displayName<\/span> =<\/span> '<\/span>Input<\/span>'<\/span> \u2b50\ufe0f<\/span> \/\/ \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u540d\u524d\u3092\u660e\u793a\u7684\u306b\u8a2d\u5b9a<\/span>\r\n<\/code><\/pre>\n
\u4f7f\u7528\u6240\u521b\u5efa\u7684\u8f93\u5165<\/h2>\n
const<\/span> {<\/span>\r\n    handleSubmit<\/span>,<\/span>\r\n    register<\/span>,<\/span>\r\n    watch<\/span>,<\/span>\r\n    resetFormAndErrors<\/span>,<\/span>\r\n    control<\/span>,<\/span>\r\n    isSubmitting<\/span>,<\/span>\r\n    errors<\/span>,<\/span>\r\n  }<\/span> =<\/span> useUserForm<\/span>(<\/span>initialValue<\/span>)<\/span>\r\n\r\n <<\/span>form<\/span>\r\n   onSubmit<\/span>=<\/span>{<\/span>handleSubmit<\/span>(<\/span>handleSubmitForm<\/span>,<\/span> onClose<\/span>)}<\/span>\r\n   className<\/span>=<\/span>'<\/span>pt-2<\/span>'<\/span>\r\n ><\/span>\r\n <<\/span>Input<\/span>\r\n    placeholder<\/span>=<\/span>{<\/span>'<\/span>Mr. Bean<\/span>'<\/span>}<\/span>\r\n    errorText<\/span>=<\/span>{<\/span>errors<\/span>.<\/span>user<\/span>.<\/span>tel<\/span>?.<\/span>message<\/span>}<\/span>\r\n    {...<\/span>register<\/span>(<\/span>'<\/span>user.name<\/span>'<\/span>)}<\/span>\r\n  \/<\/span>>\r\n<\/span> <<\/span>InputNumber<\/span>\r\n    placeholder<\/span>=<\/span>{<\/span>'<\/span>01988882222<\/span>'<\/span>}<\/span>\r\n    errorText<\/span>=<\/span>{<\/span>errors<\/span>.<\/span>user<\/span>.<\/span>tel<\/span>?.<\/span>message<\/span>}<\/span>\r\n    {...<\/span>register<\/span>(<\/span>'<\/span>user.tel<\/span>'<\/span>)}<\/span>\r\n  \/<\/span>>\r\n<\/span> <<\/span>Input<\/span>\r\n    placeholder<\/span>=<\/span>{<\/span>'<\/span>yyyy@xxx.co.jp<\/span>'<\/span>}<\/span>\r\n    errorText<\/span>=<\/span>{<\/span>errors<\/span>.<\/span>user<\/span>.<\/span>email<\/span>?.<\/span>message<\/span>}<\/span>\r\n    {...<\/span>register<\/span>(<\/span>'<\/span>user.email<\/span>'<\/span>)}<\/span>\r\n  \/<\/span>>\r\n<\/span> <<\/span>Button<\/span>\r\n   onClick<\/span>=<\/span>{<\/span>onClose<\/span>}<\/span>\r\n   disabled<\/span>=<\/span>{<\/span>isSubmitting<\/span>}<\/span>\r\n ><\/span>\r\n   \u9589\u3058\u308b<\/span>\r\n <<\/span>\/Button<\/span>>\r\n<\/span> <<\/span>Button<\/span>\r\n  type<\/span>=<\/span>{<\/span>'<\/span>submit<\/span>'<\/span>}<\/span>\r\n  disabled<\/span>=<\/span>{<\/span>isSubmitting<\/span>}<\/span>\r\n  ><\/span>\r\n   \u4fdd\u5b58\u3059\u308b<\/span>\r\n  <<\/span>\/Button<\/span>>\r\n<\/span><<\/span>\/form<\/span>>\r\n<\/span><\/code><\/pre>\n
3. \u914d\u7f6e\u6a21\u5f0f\uff0c\u4f7f\u7528 useForm \u8fdb\u884c\u5b9e\u73b0<\/h2>\n
const<\/span> TEL_NUMBER_LENGTH<\/span> =<\/span> 11<\/span>\r\nconst<\/span> EMAIL_PATTERN_REGEX<\/span> =<\/span> \/^<\/span>\\w<\/span>+<\/span>([<\/span>.-<\/span>]?\\w<\/span>+<\/span>)<\/span>*@<\/span>\\w<\/span>+<\/span>([<\/span>.-<\/span>]?\\w<\/span>+<\/span>)<\/span>*<\/span>(\\.\\w{2,3})<\/span>+$\/<\/span>\r\n\r\n\r\n\/\/ email\u30a2\u30c9\u30ec\u30b9\u304c\u3001\u671f\u5f85\u3055\u308c\u308b\u5f62\u5f0f\u3067\u3042\u308b\u304b\u3069\u3046\u304b\u3092\u78ba\u8a8d\u3059\u308b\u305f\u3081\u306e\u95a2\u6570<\/span>\r\n\/\/ email: input\u306b\u5165\u529b\u3055\u308c\u305femail\u30a2\u30c9\u30ec\u30b9\u3002<\/span>\r\n\/\/ email\u30a2\u30c9\u30ec\u30b9\u304c\u671f\u5f85\u3055\u308c\u308b\u5f62\u5f0f\u3067\u3042\u308c\u3070true\u3092\u3001\u305d\u3046\u3067\u306a\u3051\u308c\u3070false\u3092\u8fd4\u3059\u3002<\/span>\r\nconst<\/span> validateEmail<\/span> =<\/span> (<\/span>email<\/span>:<\/span> string<\/span>)<\/span> =><\/span> {<\/span>\r\n  if <\/span>(<\/span>email<\/span> ===<\/span> ''<\/span>)<\/span> {<\/span>\r\n    return<\/span> true<\/span>\r\n  }<\/span>\r\n  return<\/span> EMAIL_PATTERN_REGEX<\/span>.<\/span>test<\/span>(<\/span>email<\/span>)<\/span>\r\n}<\/span>\r\n\r\n\/\/ \u96fb\u8a71\u756a\u53f7\u304c\u6307\u5b9a\u3057\u305f\u901a\u308a\u306e\u6841\u6570\u304c\u5165\u529b\u3055\u308c\u3066\u3044\u308b\u304b\u3069\u3046\u304b\u3092\u78ba\u8a8d\u3059\u308b\u305f\u3081\u306e\u95a2\u6570<\/span>\r\n\/\/ tel: input\u306b\u5165\u529b\u3055\u308c\u305f\u96fb\u8a71\u756a\u53f7\u3002<\/span>\r\n\/\/ \u6307\u5b9a\u3057\u305f\u901a\u308a\u306e\u6841\u6570\u304c\u5165\u529b\u3055\u308c\u3066\u3044\u308c\u3070true\u3092\u3001\u305d\u3046\u3067\u306a\u3051\u308c\u3070false\u3092\u8fd4\u3059\u3002<\/span>\r\nconst<\/span> validateTelNumber<\/span> =<\/span> (<\/span>tel<\/span>:<\/span> string<\/span>)<\/span> =><\/span> {<\/span>\r\n  if <\/span>(<\/span>tel<\/span> ===<\/span> ''<\/span>)<\/span> {<\/span>\r\n    return<\/span> true<\/span>\r\n  }<\/span>\r\n  return<\/span> tel<\/span>.<\/span>length<\/span> ===<\/span> TEL_NUMBER_LENGTH<\/span>\r\n}<\/span>\r\n\r\n\r\n\/\/ \u2b50\ufe0f \u3053\u3053\u30d9\u30fc\u30b9\u306eSchema\u304c\u5b8c\u6210 <\/span>\r\nconst<\/span> schema<\/span> =<\/span> z<\/span>.<\/span>object<\/span>({<\/span>\r\n  user<\/span>:<\/span> z<\/span>.<\/span>object<\/span>({<\/span>\r\n    name<\/span>:<\/span> z<\/span>.<\/span>string<\/span>(),<\/span> \/\/ string\u578b\u306e\u307f\u8a31\u5bb9<\/span>\r\n    email<\/span>:<\/span> z<\/span>.<\/span>string<\/span>().<\/span>refine<\/span>(<\/span>validateEmail<\/span>,<\/span> {<\/span>\r\n      message<\/span>:<\/span> '<\/span>\u6709\u52b9\u306a\u30e1\u30fc\u30eb\u30a2\u30c9\u30ec\u30b9\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/span>'<\/span>,<\/span>\r\n    }),<\/span>  \/\/ \u81ea\u8eab\u3067\u30ab\u30b9\u30bf\u30e0\u3057\u305fvalidation\u306e\u30eb\u30fc\u30eb\u306b\u6cbf\u3063\u3066\u8a31\u5bb9<\/span>\r\n    tel<\/span>:<\/span> z<\/span>.<\/span>string<\/span>().<\/span>refine<\/span>(<\/span>validateTelNumber<\/span>,<\/span> {<\/span>\r\n      message<\/span>:<\/span> '<\/span>\u96fb\u8a71\u756a\u53f7\u306e\u6841\u6570\u304c\u9069\u5207\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002<\/span>'<\/span>,<\/span>\r\n    }),<\/span> \/\/ \u81ea\u8eab\u3067\u30ab\u30b9\u30bf\u30e0\u3057\u305fvalidation\u306e\u30eb\u30fc\u30eb\u306b\u6cbf\u3063\u3066\u8a31\u5bb9<\/span>\r\n  })<\/span>\r\n});<\/span>\r\n\r\n\r\n\/\/ \u30ab\u30b9\u30bf\u30e0 hook \u3053\u306e\u4e2d\u3067useForm\u3092\u4f7f\u7528\u3057\u3001\u51e6\u7406\u3092\u5b9a\u7fa9<\/span>\r\nexport<\/span> const<\/span> useUserForm<\/span> =<\/span> (<\/span>initialValue<\/span>:<\/span> FormValues<\/span>)<\/span> =><\/span> {<\/span>\r\n  const<\/span> {<\/span>\r\n    handleSubmit<\/span>,<\/span>\r\n    register<\/span>,<\/span>\r\n    formState<\/span>:<\/span> {<\/span> isSubmitting<\/span>,<\/span> errors<\/span> },<\/span>\r\n    resetField<\/span>,<\/span>\r\n  }<\/span> =<\/span> useForm<\/span><<\/span>SchemaType<\/span>><\/span>({<\/span>\r\n    mode<\/span>:<\/span> '<\/span>onSubmit<\/span>'<\/span>,<\/span> \/\/ submit\u306e\u6642\u306bvalidation\u51e6\u7406\u3092\u767a\u52d5\u3055\u305b\u308b\u305f\u3081\u306e\u8a2d\u5b9a<\/span>\r\n    reValidateMode<\/span>:<\/span> '<\/span>onSubmit<\/span>'<\/span>,<\/span> \/\/ 2\u56de\u76ee\u4ee5\u964d\u3001onSubmit\u306e\u6642\u306bvalidation\u3092\u767a\u52d5\u3055\u305b\u308b\u3068\u3044\u3046\u8a2d\u5b9a<\/span>\r\n    resolver<\/span>:<\/span> zodResolver<\/span>(<\/span>schema<\/span>),<\/span> \/\/ zodResolver\u3092\u5b9a\u7fa9<\/span>\r\n    defaultValues<\/span>:<\/span> {<\/span> \/\/ input\u306b\u521d\u671f\u5024\u3092\u5b9a\u7fa9\u3055\u305b\u308b<\/span>\r\n      user<\/span>:<\/span> {<\/span>\r\n        name<\/span>:<\/span> initialValue<\/span>.<\/span>user<\/span>.<\/span>name<\/span>,<\/span>\r\n        email<\/span>:<\/span> initialValue<\/span>.<\/span>user<\/span>.<\/span>email<\/span>,<\/span>\r\n        tel<\/span>:<\/span> initialValue<\/span>.<\/span>user<\/span>.<\/span>tel<\/span>,<\/span>\r\n      },<\/span>\r\n    },<\/span>\r\n  })<\/span>\r\n\r\n  \/\/ \u4fdd\u5b58\u30dc\u30bf\u30f3\u304c\u30af\u30ea\u30c3\u30af\u3055\u308c\u305f\u6642\u306b\u547c\u3073\u51fa\u3055\u308c\u3001\u30d5\u30a9\u30fc\u30e0\u30c7\u30fc\u30bf\u306e\u9001\u4fe1\u3092\u884c\u3046\u95a2\u6570<\/span>\r\n  const<\/span> onSubmitForm<\/span> =<\/span> (<\/span>\r\n    handleSubmitForm<\/span>:<\/span> ModalProps<\/span>[<\/span>'<\/span>handleSubmitForm<\/span>'<\/span>],<\/span>\r\n    onClose<\/span>:<\/span> ()<\/span> =><\/span> void<\/span>\r\n  )<\/span> =><\/span> {<\/span>\r\n    \/\/ \u30d5\u30a9\u30fc\u30e0\u30c7\u30fc\u30bf\u306e\u9001\u4fe1\u3068resetField\u3001\u30e2\u30fc\u30c0\u30eb\u3092\u9589\u3058\u308b\u51e6\u7406\u3092\u884c\u3046\u95a2\u6570\u3002<\/span>\r\n    const<\/span> handleSend<\/span>:<\/span> SubmitHandler<\/span><<\/span>SchemaType<\/span>><\/span> =<\/span> async <\/span>(<\/span>\r\n      values<\/span>\r\n    ):<\/span> Promise<\/span><<\/span>void<\/span>><\/span> =><\/span> {<\/span>\r\n      await<\/span> handleSubmitForm<\/span>(<\/span>values<\/span>)<\/span>\r\n      resetFormAndErrors<\/span>()<\/span>\r\n      onClose<\/span>()<\/span>\r\n    }<\/span>\r\n    return<\/span> handleSubmit<\/span>(<\/span>handleSend<\/span>)<\/span>\r\n  }<\/span>\r\n\r\n  \/\/ user\u60c5\u5831\u306e\u5165\u529b\u60c5\u5831\u3092\u30ea\u30bb\u30c3\u30c8\u3059\u308b\u95a2\u6570\u3002<\/span>\r\n  const<\/span> resetFormAndErrors<\/span> =<\/span> ()<\/span> =><\/span> {<\/span>\r\n    resetField<\/span>(<\/span>'<\/span>user<\/span>'<\/span>)<\/span>\r\n  }<\/span>\r\n\r\n  return<\/span> {<\/span>\r\n    handleSubmit<\/span>:<\/span> onSubmitForm<\/span>,<\/span>\r\n    register<\/span>,<\/span>\r\n    resetFormAndErrors<\/span>,<\/span>\r\n    isSubmitting<\/span>,<\/span>\r\n    errors<\/span>,<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
(1) \u521b\u5efa\u6a21\u5f0f<\/h4>\n
\u662f\u5426\u53ea\u5141\u8bb8\u8f93\u5165\u6587\u5b57\uff0c\u662f\u5426\u5b58\u5728\u5b57\u7b26\u6570\u91cf\u9650\u5236\uff1f\u662f\u5426\u6709\u6307\u5b9a\u53ea\u80fd\u8f93\u5165\u7535\u5b50\u90ae\u4ef6\u7b49\u7684\u8868\u5355\u8bbe\u7f6e\u7684\u5b9e\u73b0\uff1f<\/p>\n
const<\/span> TEL_NUMBER_LENGTH<\/span> =<\/span> 11<\/span>\r\nconst<\/span> EMAIL_PATTERN_REGEX<\/span> =<\/span> \/^<\/span>\\w<\/span>+<\/span>([<\/span>.-<\/span>]?\\w<\/span>+<\/span>)<\/span>*@<\/span>\\w<\/span>+<\/span>([<\/span>.-<\/span>]?\\w<\/span>+<\/span>)<\/span>*<\/span>(\\.\\w{2,3})<\/span>+$\/<\/span>\r\n\r\n\r\n\/\/ email\u30a2\u30c9\u30ec\u30b9\u304c\u3001\u671f\u5f85\u3055\u308c\u308b\u5f62\u5f0f\u3067\u3042\u308b\u304b\u3069\u3046\u304b\u3092\u78ba\u8a8d\u3059\u308b\u305f\u3081\u306e\u95a2\u6570<\/span>\r\n\/\/ email: input\u306b\u5165\u529b\u3055\u308c\u305femail\u30a2\u30c9\u30ec\u30b9\u3002<\/span>\r\n\/\/ email\u30a2\u30c9\u30ec\u30b9\u304c\u671f\u5f85\u3055\u308c\u308b\u5f62\u5f0f\u3067\u3042\u308c\u3070true\u3092\u3001\u305d\u3046\u3067\u306a\u3051\u308c\u3070false\u3092\u8fd4\u3059\u3002<\/span>\r\nconst<\/span> validateEmail<\/span> =<\/span> (<\/span>email<\/span>:<\/span> string<\/span>)<\/span> =><\/span> {<\/span>\r\n  if <\/span>(<\/span>email<\/span> ===<\/span> ''<\/span>)<\/span> {<\/span>\r\n    return<\/span> true<\/span>\r\n  }<\/span>\r\n  return<\/span> EMAIL_PATTERN_REGEX<\/span>.<\/span>test<\/span>(<\/span>email<\/span>)<\/span>\r\n}<\/span>\r\n\r\n\/\/ \u96fb\u8a71\u756a\u53f7\u304c\u6307\u5b9a\u3057\u305f\u901a\u308a\u306e\u6841\u6570\u304c\u5165\u529b\u3055\u308c\u3066\u3044\u308b\u304b\u3069\u3046\u304b\u3092\u78ba\u8a8d\u3059\u308b\u305f\u3081\u306e\u95a2\u6570<\/span>\r\n\/\/ tel: input\u306b\u5165\u529b\u3055\u308c\u305f\u96fb\u8a71\u756a\u53f7\u3002<\/span>\r\n\/\/ \u6307\u5b9a\u3057\u305f\u901a\u308a\u306e\u6841\u6570\u304c\u5165\u529b\u3055\u308c\u3066\u3044\u308c\u3070true\u3092\u3001\u305d\u3046\u3067\u306a\u3051\u308c\u3070false\u3092\u8fd4\u3059\u3002<\/span>\r\nconst<\/span> validateTelNumber<\/span> =<\/span> (<\/span>tel<\/span>:<\/span> string<\/span>)<\/span> =><\/span> {<\/span>\r\n  if <\/span>(<\/span>tel<\/span> ===<\/span> ''<\/span>)<\/span> {<\/span>\r\n    return<\/span> true<\/span>\r\n  }<\/span>\r\n  return<\/span> tel<\/span>.<\/span>length<\/span> ===<\/span> TEL_NUMBER_LENGTH<\/span>\r\n}<\/span>\r\n\r\n\r\n\/\/ \u2b50\ufe0f \u3053\u3053\u30d9\u30fc\u30b9\u306eSchema\u304c\u5b8c\u6210 <\/span>\r\nconst<\/span> schema<\/span> =<\/span> z<\/span>.<\/span>object<\/span>({<\/span>\r\n  user<\/span>:<\/span> z<\/span>.<\/span>object<\/span>({<\/span>\r\n    name<\/span>:<\/span> z<\/span>.<\/span>string<\/span>(),<\/span> \/\/ string\u578b\u306e\u307f\u8a31\u5bb9<\/span>\r\n    email<\/span>:<\/span> z<\/span>.<\/span>string<\/span>().<\/span>refine<\/span>(<\/span>validateEmail<\/span>,<\/span> {<\/span>\r\n      message<\/span>:<\/span> '<\/span>\u6709\u52b9\u306a\u30e1\u30fc\u30eb\u30a2\u30c9\u30ec\u30b9\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/span>'<\/span>,<\/span>\r\n    }),<\/span>  \/\/ \u81ea\u8eab\u3067\u30ab\u30b9\u30bf\u30e0\u3057\u305fvalidation\u306e\u30eb\u30fc\u30eb\u306b\u6cbf\u3063\u3066\u8a31\u5bb9<\/span>\r\n    tel<\/span>:<\/span> z<\/span>.<\/span>string<\/span>().<\/span>refine<\/span>(<\/span>validateTelNumber<\/span>,<\/span> {<\/span>\r\n      message<\/span>:<\/span> '<\/span>\u96fb\u8a71\u756a\u53f7\u306e\u6841\u6570\u304c\u9069\u5207\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002<\/span>'<\/span>,<\/span>\r\n    }),<\/span> \/\/ \u81ea\u8eab\u3067\u30ab\u30b9\u30bf\u30e0\u3057\u305fvalidation\u306e\u30eb\u30fc\u30eb\u306b\u6cbf\u3063\u3066\u8a31\u5bb9<\/span>\r\n  })<\/span>\r\n});<\/span>\r\n<\/code><\/pre>\n
\u4f7f\u7528 useForm \u521b\u5efa\u4e00\u4e2a\u81ea\u5b9a\u4e49\u7684 hook\u3002<\/h4>\n
\/\/ \u30ab\u30b9\u30bf\u30e0 hook \u3053\u306e\u4e2d\u3067useForm\u3092\u4f7f\u7528\u3057\u3001\u51e6\u7406\u3092\u5b9a\u7fa9<\/span>\r\nexport<\/span> const<\/span> useUserForm<\/span> =<\/span> (<\/span>initialValue<\/span>:<\/span> FormValues<\/span>)<\/span> =><\/span> {<\/span>\r\n  const<\/span> {<\/span>\r\n    handleSubmit<\/span>,<\/span> \/\/ \u9001\u4fe1\u3059\u308b\u95a2\u6570<\/span>\r\n    register<\/span>,<\/span> \/\/ { name, ref, onChange, onBlur }\u306e\u8981\u7d20\u3092\u6301\u3064\u30aa\u30d6\u30b8\u30a7\u30af\u30c8<\/span>\r\n    formState<\/span>:<\/span> {<\/span> isSubmitting<\/span>,<\/span> errors<\/span> },<\/span> \/\/ form\u306e\u72b6\u614b<\/span>\r\n    resetField<\/span>,<\/span> \/\/ form\u306e\u72b6\u614b\u3092\u30ea\u30bb\u30c3\u30c8\u3059\u308b\u95a2\u6570<\/span>\r\n  }<\/span> =<\/span> useForm<\/span><<\/span>SchemaType<\/span>><\/span>({<\/span>\r\n    mode<\/span>:<\/span> '<\/span>onSubmit<\/span>'<\/span>,<\/span> \/\/ submit\u306e\u6642\u306bvalidation\u51e6\u7406\u3092\u767a\u52d5\u3055\u305b\u308b\u305f\u3081\u306e\u8a2d\u5b9a<\/span>\r\n    reValidateMode<\/span>:<\/span> '<\/span>onSubmit<\/span>'<\/span>,<\/span> \/\/ 2\u56de\u76ee\u4ee5\u964d\u3001onSubmit\u306e\u6642\u306bvalidation\u3092\u767a\u52d5\u3055\u305b\u308b\u3068\u3044\u3046\u8a2d\u5b9a<\/span>\r\n    resolver<\/span>:<\/span> zodResolver<\/span>(<\/span>schema<\/span>),<\/span> \/\/ zodResolver\u3092\u5b9a\u7fa9<\/span>\r\n    defaultValues<\/span>:<\/span> {<\/span> \/\/ input\u306b\u521d\u671f\u5024\u3092\u5b9a\u7fa9\u3055\u305b\u308b<\/span>\r\n      user<\/span>:<\/span> {<\/span>\r\n        name<\/span>:<\/span> initialValue<\/span>.<\/span>user<\/span>.<\/span>name<\/span>,<\/span>\r\n        email<\/span>:<\/span> initialValue<\/span>.<\/span>user<\/span>.<\/span>email<\/span>,<\/span>\r\n        tel<\/span>:<\/span> initialValue<\/span>.<\/span>user<\/span>.<\/span>tel<\/span>,<\/span>\r\n      },<\/span>\r\n    },<\/span>\r\n  })<\/span>\r\n\r\n  \/\/ \u4fdd\u5b58\u30dc\u30bf\u30f3\u304c\u30af\u30ea\u30c3\u30af\u3055\u308c\u305f\u6642\u306b\u547c\u3073\u51fa\u3055\u308c\u3001\u30d5\u30a9\u30fc\u30e0\u30c7\u30fc\u30bf\u306e\u9001\u4fe1\u3092\u884c\u3046\u95a2\u6570<\/span>\r\n  const<\/span> onSubmitForm<\/span> =<\/span> (<\/span>\r\n    handleSubmitForm<\/span>:<\/span> ModalProps<\/span>[<\/span>'<\/span>handleSubmitForm<\/span>'<\/span>],<\/span>\r\n    onClose<\/span>:<\/span> ()<\/span> =><\/span> void<\/span>\r\n  )<\/span> =><\/span> {<\/span>\r\n    \/\/ \u30d5\u30a9\u30fc\u30e0\u30c7\u30fc\u30bf\u306e\u9001\u4fe1\u3068resetField\u3001\u30e2\u30fc\u30c0\u30eb\u3092\u9589\u3058\u308b\u51e6\u7406\u3092\u884c\u3046\u95a2\u6570\u3002<\/span>\r\n    const<\/span> handleSend<\/span>:<\/span> SubmitHandler<\/span><<\/span>SchemaType<\/span>><\/span> =<\/span> async <\/span>(<\/span>\r\n      values<\/span>\r\n    ):<\/span> Promise<\/span><<\/span>void<\/span>><\/span> =><\/span> {<\/span>\r\n      await<\/span> handleSubmitForm<\/span>(<\/span>values<\/span>)<\/span>\r\n      resetFormAndErrors<\/span>()<\/span>\r\n      onClose<\/span>()<\/span>\r\n    }<\/span>\r\n    return<\/span> handleSubmit<\/span>(<\/span>handleSend<\/span>)<\/span>\r\n  }<\/span>\r\n\r\n  \/\/ user\u60c5\u5831\u306e\u5165\u529b\u60c5\u5831\u3092\u30ea\u30bb\u30c3\u30c8\u3059\u308b\u95a2\u6570\u3002<\/span>\r\n  const<\/span> resetFormAndErrors<\/span> =<\/span> ()<\/span> =><\/span> {<\/span>\r\n    resetField<\/span>(<\/span>'<\/span>user<\/span>'<\/span>)<\/span>\r\n  }<\/span>\r\n\r\n  return<\/span> {<\/span>\r\n    handleSubmit<\/span>:<\/span> onSubmitForm<\/span>,<\/span>\r\n    register<\/span>,<\/span>\r\n    resetFormAndErrors<\/span>,<\/span>\r\n    isSubmitting<\/span>,<\/span>\r\n    errors<\/span>,<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
\u4f7f\u7528 useForm \u7684\u65b9\u6cd5\u5b9a\u4e49<\/p>\n
const<\/span> {<\/span> form\u3092\u64cd\u308b\u51e6\u7406<\/span>  }<\/span> =<\/span> useForm<\/span><<\/span>\u76e3\u8996\u3057\u305f\u3044\u5024\u306eschema\u306e\u578b<\/span>><\/span>({<\/span>   \u521d\u671f\u5024\u3084<\/span>\u3001<\/span>\u3069\u306e\u64cd\u4f5c\u306e\u6642\u306b\u51e6\u7406\u3059\u308b\u304b\u306a\u3069\u306e\u8a2d\u5b9a<\/span>  })<\/span>\r\n<\/code><\/pre>\n
 <\/p>\n
\u603b\u7ed3<\/h2>\n
\u4f7f\u7528React Hook Form\u8fd9\u4e2a\u5e93\u53ef\u4ee5\u5145\u5206\u5229\u7528\u975e\u53d7\u63a7\u7ec4\u4ef6\u7684\u4f18\u70b9\uff0c\u5b9e\u73b0\u9ad8\u6027\u80fd\u7684\u8868\u5355\u3002\u8981\u4f7f\u7528\u8fd9\u4e2a\u5e93\uff0c\u9700\u8981\u4ee5\u4e0b\u5185\u5bb9\uff1a
\n\u2022 \u5b9e\u73b0forwardRef
\n\u2022 \u5b9a\u4e49\u9002\u5f53\u7684\u9a8c\u8bc1\u6a21\u5f0f
\n\u2022 \u521b\u5efa\u81ea\u5b9a\u4e49hook<\/p>\n
\u8bf7\u5148\u53c2\u9605\u4ee5\u4e0b\u8d44\u6599\uff1a<\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
  React Hook Form (\u4e2d\u6587\u7ffb\u8bd1)\uff1a\u54cd\u5e94\u5f0f\u94a9\u5b50\u8868\u5355 React Hook Form\u7684\u4f18 […]<\/p>\n","protected":false},"author":12,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-37931","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"\n\u3010React.js\u3011\u5173\u4e8eReact Hook Form - Blog - Silicon Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/zh\/blog\/\u3010react-js\u3011\u5173\u4e8ereact-hook-form\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u3010React.js\u3011\u5173\u4e8eReact Hook Form\" \/>\n<meta property=\"og:description\" content=\"  React Hook Form (\u4e2d\u6587\u7ffb\u8bd1)\uff1a\u54cd\u5e94\u5f0f\u94a9\u5b50\u8868\u5355 React Hook Form\u7684\u4f18 […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/zh\/blog\/\u3010react-js\u3011\u5173\u4e8ereact-hook-form\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:published_time\" content=\"2023-02-25T23:37:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-29T17:05:56+00:00\" \/>\n<meta name=\"author\" content=\"\u9038, \u79d1\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u9038, \u79d1\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90react-js%e3%80%91%e5%85%b3%e4%ba%8ereact-hook-form\/\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90react-js%e3%80%91%e5%85%b3%e4%ba%8ereact-hook-form\/\",\"name\":\"\u3010React.js\u3011\u5173\u4e8eReact Hook Form - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\"},\"datePublished\":\"2023-02-25T23:37:12+00:00\",\"dateModified\":\"2024-04-29T17:05:56+00:00\",\"author\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/85c1dae56e6ea1e695c73d33c684d487\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90react-js%e3%80%91%e5%85%b3%e4%ba%8ereact-hook-form\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90react-js%e3%80%91%e5%85%b3%e4%ba%8ereact-hook-form\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90react-js%e3%80%91%e5%85%b3%e4%ba%8ereact-hook-form\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.silicloud.com\/zh\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u3010React.js\u3011\u5173\u4e8eReact Hook Form\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/\",\"name\":\"Blog - Silicon Cloud\",\"description\":\"\",\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/85c1dae56e6ea1e695c73d33c684d487\",\"name\":\"\u9038, \u79d1\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c94f6d9cbbfbca863fab309840bd690c153c95f8490c290ad2ed54dd693dad16?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c94f6d9cbbfbca863fab309840bd690c153c95f8490c290ad2ed54dd693dad16?s=96&d=mm&r=g\",\"caption\":\"\u9038, \u79d1\"},\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/author\/keyi\/\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90react-js%e3%80%91%e5%85%b3%e4%ba%8ereact-hook-form\/#local-main-organization-logo\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Blog - Silicon Cloud\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\u3010React.js\u3011\u5173\u4e8eReact Hook Form - Blog - Silicon Cloud","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/zh\/blog\/\u3010react-js\u3011\u5173\u4e8ereact-hook-form\/","og_locale":"zh_CN","og_type":"article","og_title":"\u3010React.js\u3011\u5173\u4e8eReact Hook Form","og_description":"  React Hook Form (\u4e2d\u6587\u7ffb\u8bd1)\uff1a\u54cd\u5e94\u5f0f\u94a9\u5b50\u8868\u5355 React Hook Form\u7684\u4f18 […]","og_url":"https:\/\/www.silicloud.com\/zh\/blog\/\u3010react-js\u3011\u5173\u4e8ereact-hook-form\/","og_site_name":"Blog - Silicon Cloud","article_published_time":"2023-02-25T23:37:12+00:00","article_modified_time":"2024-04-29T17:05:56+00:00","author":"\u9038, \u79d1","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"\u9038, \u79d1","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"3 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90react-js%e3%80%91%e5%85%b3%e4%ba%8ereact-hook-form\/","url":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90react-js%e3%80%91%e5%85%b3%e4%ba%8ereact-hook-form\/","name":"\u3010React.js\u3011\u5173\u4e8eReact Hook Form - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website"},"datePublished":"2023-02-25T23:37:12+00:00","dateModified":"2024-04-29T17:05:56+00:00","author":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/85c1dae56e6ea1e695c73d33c684d487"},"breadcrumb":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90react-js%e3%80%91%e5%85%b3%e4%ba%8ereact-hook-form\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90react-js%e3%80%91%e5%85%b3%e4%ba%8ereact-hook-form\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90react-js%e3%80%91%e5%85%b3%e4%ba%8ereact-hook-form\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.silicloud.com\/zh\/blog\/"},{"@type":"ListItem","position":2,"name":"\u3010React.js\u3011\u5173\u4e8eReact Hook Form"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website","url":"https:\/\/www.silicloud.com\/zh\/blog\/","name":"Blog - Silicon Cloud","description":"","inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/85c1dae56e6ea1e695c73d33c684d487","name":"\u9038, \u79d1","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c94f6d9cbbfbca863fab309840bd690c153c95f8490c290ad2ed54dd693dad16?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c94f6d9cbbfbca863fab309840bd690c153c95f8490c290ad2ed54dd693dad16?s=96&d=mm&r=g","caption":"\u9038, \u79d1"},"url":"https:\/\/www.silicloud.com\/zh\/blog\/author\/keyi\/"},{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90react-js%e3%80%91%e5%85%b3%e4%ba%8ereact-hook-form\/#local-main-organization-logo","url":"","contentUrl":"","caption":"Blog - Silicon Cloud"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/37931","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/comments?post=37931"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/37931\/revisions"}],"predecessor-version":[{"id":88747,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/37931\/revisions\/88747"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/media?parent=37931"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/categories?post=37931"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/tags?post=37931"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}