你好,我目前正在做我自己的项目.

我在添加配置文件菜单中使用了Reaction Hook Form.

但当我想要在带有嵌套对象的输入中发送错误验证消息时,我会遇到问题,就像这样.

//#01工作错误确认消息示例.

<input
  type="text"
  id="name"
  className="some-class"
  placeholder="Last Name"
  {...register("last_name", {
   required: {
   value: true,
    message: 'Last Name is required'
  },
  minLength: {
     value: 2,
     message: '* Last name must be at least 2 characters long'
    }
  })}
 />

//#02嵌套对象输入示例(不工作)

<div className="form-control w-full max-w-xs">
 <label htmlFor="street_name" className="label">
  <span className="label-text font-semibold"> Address </span>
 </label>
 <textarea
  id="street_name"
  placeholder="Address"
  className="textarea some-class"
  {...register("address.street_name", {
    required: true,
    message: '* Address is required'
  })}
 ></textarea>
 <p className="text-error text-xs py-1 px-1">
  {errors.address?.street_name?.message}
 </p>
</div>

第二个输入(#02)错误验证消息不起作用,因为它在注册字段中有一个嵌套对象,我认为错误消息是错误的.

推荐答案

您不能在规则之外定义message.

在注册规则中try 这样做:

{...register("address.street_name", {
    required: '* Address is required'
})

{...register("address.street_name", {
    required: { value: true, message: "* Address is required" }
}

Here is a w或king codesandbox

Reactjs相关问答推荐

当我在React中使用类方法更新模型的状态时,它在严格模式下触发两次

如何通过浏览器路由在单独的.jsx文件中使用MUI抽屉?

无法从正在使用Reaction的Electron 商务store 项目中的购物车中删除项目

如何访问子集合中的文档?

在任何渲染之前在ReactJs中获取数据

在reduce()方法上得到NaN

Reactjs:MUI5:MobileDateTimePicker API:如何自定义日历中的文本

对于 ref 上的可见 prop 或 open 方法来react 组件,哪种方式更好?

ReactJS中使用setState方法时,Context内部的State未进行更新

字段是必需的,当它没有定义时

使用 axios 响应路由 Dom 操作

意外的标记.您可能需要一个合适的加载器来处理这种文件类型.书?.img? /*#__PURE__*/React.createElement("img",

如何在对话素材ui中设置边框半径?

react 事件顺序

如何解决在 react.js 中找不到模块错误

如何制作基于对象 struct 呈现数据的可重用组件?

React Router v6 - 访问嵌套路由和处理手写 url 的正确方法

如何在 react-router-dom v6 中实现监听功能?

如何防止 mui x-date-picker 被截断?

试图将页面限制为仅登录但有条件的用户似乎永远不会运行