我的问题是关于材料 UI 4，材料 ui/选择器处理不存在的"mask"属性

Question

使用 Material-UI (mui( 将 reactjs 项目从 v3 升级到 v4，并遵循推荐的迁移指南。作为替换材料 ui-pickers 2.2.1 到 @material-ui/pickers 的一部分。

DatePicker 组件现在抱怨不存在"掩码"属性，该属性曾经在 mui3 上正常工作。

迁移指南中没有提到拾取器。所以我想知道。现在我回滚到使用 mui 3.9 和材料 ui-pickers 2.2.1。

import { DatePicker, DateTimePicker } from '@material-ui/pickers';
// later on...
return (
    <DatePicker
      name={name}
      value={value}
      clearable
      autoOk
      onChange={handleChange}
      format="DD/MM/YYYY"
      placeholder="___/___/______"
      mask={masked(value)}         // <=== The mask property
      {...other}
    />
  );

预期的行为是日期选择器应该像在 mui v3 中一样工作，因为迁移指南中没有提到任何内容。

实际是组件的掩码属性不再存在。

Answer 1

如果是自定义日期格式，您还应该更新掩码以匹配相同的日期格式。

例：

 <MuiDateTimePicker
   inputFormat="DD/MM/yyyy HH:mm:ss"
   mask={"__/__/____ __:__:__"}   
   />

Answer 2

现在不再需要升级到 v3 页面中的面具道具部分说：

蒙版将从格式自动生成和应用 通过。

如果您查看 DatePicker API，您会发现没有 mask 属性，因此您必须改用 format 属性，或者您可以使用具有可用于覆盖 generate from 格式的mask属性的KeyboardDatePicker。

Answer 3

对于那些不想使用掩码的人，要删除警告(在我的情况下导致性能问题(，只需传递一个空字符串 mask="，并使用 LocalizationProvider 中的"locale"属性来设置 lang 标准掩码。

import React, { Component } from 'react';
import TextField from '@mui/material/TextField';
import AdapterDateFns from '@mui/lab/AdapterDateFns';
import LocalizationProvider from '@mui/lab/LocalizationProvider';
import DateTimePicker from '@mui/lab/DateTimePicker';
import enLocale from 'date-fns/locale/en-US';
class EventForm extends Component {
  constructor(props) {
    super(props);
    this.localeMap = {
      en: enLocale,
    };
    this.state = {
      date: new Date(),
    };
  }
  setDateTime = (date) => {
    this.setState({endDate: date})
  }
  render () {
    return(
      <LocalizationProvider dateAdapter={AdapterDateFns} locale={this.localeMap['en']}>
        <DateTimePicker
          mask=""
          renderInput={(props) => {return (<TextField {...props} />)}}
          label="date-time"
          value={this.state.date}
          onChange={(newValue) => {
            this.setDateTime(newValue);
          }}
        />
      </LocalizationProvider>
    )
}