将 Material UI DatePicker 与 yup 和 react-hook-form 结合使用 - error 属性无法按预期工作

Question

我正在制作一个用 yup、react-hook-form 和 Material UI DatePicker/TextField 制作的注册表单。我想要一个出生日期字段来检查用户是否年满 18 岁。错误消息会正确显示，但错误状态的红色仅在输入为空时有效（并且年龄低于 18 岁时无效）。我正在控制台记录指示红色的“无效”值，并且在应该时将其设置为 true。

这是一个沙箱链接： https://codesandbox.io/s/datepicker-yup-validation-8rod3 ?file=/src/App.js

Answer 1

您只需将error属性放在后面，{...params}如下所示：

<DatePicker
  ...
  renderInput={(params) => (
    <TextField
      helperText={invalid ? error.message : null}
      id="dateOfBirth"
      variant="standard"
      margin="dense"
      fullWidth
      color="primary"
      autoComplete="bday"
      {...params}
      error={invalid}
    />
  )}
/>