readOnly 未在 react js 中申请材料 ui 的 KeyboardDatePicker 的输入字段

Posted 2023-02-22

【中文标题】readOnly 未在 react js 中申请材料 ui 的 KeyboardDatePicker 的输入字段

【英文标题】：readOnly is not applying for input field of KeyboardDatePicker of material ui in react js

【发布时间】：2020-01-25 15:31:24

【问题描述】：

KeyboardDatePicker 不支持其输入字段的 readOnly 属性

我尝试了 API 文档中已经提到的 readOnly 属性，但没有成功。它正在为父容器应用只读，而不是在 KeyboardDatePicker 中的输入字段。

<KeyboardDatePicker
    margin="normal"
    id="mui-pickers-date"
    className = "dialog-calendar"
    value=selectedDate
    shouldDisableDate = handleDisableDate
    minDate = startDate
    maxDate = endDate
    minDateMessage = ''
    onChange=handleDateChange
    format = "MM/dd/yyyy"
    disablePast = true
    disabled = isDisabled
    allowKeyboardControl = false
    readOnly = true
    autoFill = false
    KeyboardButtonProps=
         'aria-label': 'change date',
    

【参考方案1】：

这是我尝试设置只读的方式。

<KeyboardDatePicker
  ...
  InputProps= readOnly: true 

/>

【讨论】：

这对我来说非常有效，就像一个“禁用”道具，但不影响样式。谢谢！

【参考方案2】：

您只需要覆盖 TextFieldComponent`。

这是工作代码：-

import React from "react";
import ReactDOM from "react-dom";
import TextField from '@material-ui/core/TextField';
import  KeyboardDatePicker, MuiPickersUtilsProvider,  from "@material-ui/pickers";
import DateFnsUtils from '@date-io/date-fns';

const TextFieldComponent = (props) => 
  return <TextField ...props disabled=true />

function App() 
  const [selectedDate, setSelectedDate] = React.useState(
    new Date("2014-08-18T21:11:54")
  );
  const handleDateChange = date => 
    setSelectedDate(date);
  ;
  return (
    <MuiPickersUtilsProvider utils=DateFnsUtils>
      <KeyboardDatePicker
        disableToolbar
        variant="inline"
        format="MM/dd/yyyy"
        margin="normal"
        id="date-picker-inline"
        label="Date picker inline"
        value=selectedDate
        onChange=handleDateChange
        KeyboardButtonProps=
          "aria-label": "change date"
        
        TextFieldComponent=TextFieldComponent
      />
    </MuiPickersUtilsProvider>
  );


const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

【讨论】：

他的作品，但它对用户界面的影响很大，我的意思是一切都变灰了。有没有办法以某种方式禁用输入字段？

@Aldor 可以使用 InputProps InputProps= classes: disabled: classes.disabledDatePicker 设置日期选择器的禁用输入的颜色，其中类在 const useStyles = makeStyles 中定义((theme: Theme) => ( root: display: 'flex', flexWrap: 'wrap', , disabledDatePicker: color: '#800080' ));