Material UI DatePicker无法控制错误状态显示如何处理

问题根因 #

你遇到的异常是两个原因共同导致的：

1. renderInput回调中属性顺序错误，你自定义传入的error属性被params自带的内置校验生成的error值覆盖
2. MUI的日期选择器默认开启内置校验逻辑，空值、格式不匹配等场景会自动设置错误状态，优先级高于你手动传入的error属性

解决方法 #

按以下两步修改即可完全自主控制错误状态：

• 调整TextField的属性顺序，将自定义属性放在{...params}之后，确保你的配置覆盖组件内置参数
• 给MobileDatePicker添加disableValidation={true}属性，关闭组件内置的自动校验逻辑

修改后的完整代码如下：

<FormControl sx={{ minWidth: { xs: 230, sm: 300, md: 120 } }}>
    <LocalizationProvider
        dateAdapter={AdapterDateFns}
        locale={mkLocale}
    >
    <MobileDatePicker
        disableElevation
        mode="landscape"
        mask="__.__.____ __:__"
        disableFuture
        // 关闭内置自动校验
        disableValidation={true}
        hintText="Portrait Dialog"
        errorText="This is an error message."
        label="Роденден"
        floatingLabelText="Роденден"
        inputFormat="dd/MM/yyyy"
        value={form.birthday.date}
        disabled={form.birthday.disabled}
        okText="Избери"
        openTo="year"
        todayText="Денес"
        toolbarTitle="Избери датум"
        cancelText="Откажи"
        views={["year", "month", "day"]}
        onChange={handleFormBirthday}
        renderInput={(params) => (
            // 调整属性顺序，自定义error放在params之后覆盖内置值
            <TextField {...params} error={form.birthday.error} />
        )}
        allowSameDateSelection={false}
        disableHighlightToday={true}
        showTodayButton={false}
        showToolbar={false}
        maxDate={dateMax}
    />
    <FormHelperText error={form.birthday.error}>
        {form.birthday.message}
    </FormHelperText>
    </LocalizationProvider>
</FormControl>

修改后即可通过form.birthday.error的值完全自主控制错误状态，和MUI其他普通表单组件的使用逻辑完全一致。

内容的提问来源于stack exchange，提问作者Nkk