javascript - 将 MUI DatePicker 与 yup 和 react-hook-form 一起使用 - 错误 Prop 无法按预期工作

Question

我正在使用 yup、react-hook-form 和 MUI 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}
    />
  )}
/>