时间戳

首页 > 解决方案 > 如何在反应钩子中的渲染器内添加错误/验证消息

reactjs - 如何在反应钩子中的渲染器内添加错误/验证消息

问题描述

{
  label: "Room",
  name: "room",
  type: "select",
  rule: yup.string().required(),
  renderer: (data: any) => {
    const { control, register, errors } = useFormContext();
    return (
      <SelectPicker
        placeholder="Room"
        data={
         { label: 'Room 1', value: 1 }
        }
        style={{ width: '100%' }}
        value={control.getValues()['room']}
      />
    );
  }
}

如何在渲染器中添加错误/验证消息？

我在这里要做的是添加验证/错误消息，例如“需要房间”。因为在我提交表单后，它不会显示错误消息。

标签： reactjstypescriptnext.jsyup

解决方案

您可以使用Field-level Validation。默认情况下，它将在任何事件onChange之后运行。onBlur为您添加一个validate道具以SelectPicker使其工作：

<SelectPicker
  placeholder="Room"
  data={{ label: "Room 1", value: 1 }}
  validate={value => {
    if (!value) {
      return "Required";
    }
  }}
  style={{ width: "100%" }}
  value={control.getValues()["room"]}
/>

推荐阅读