无法在反应 js 类组件中编辑 datetimepicker material-ui

Posted 2023-05-07

【中文标题】无法在反应 js 类组件中编辑 datetimepicker material-ui

【英文标题】：Unable to edit datetimepicker material-ui in react js class component

【发布时间】：2020-09-07 22:58:45

【问题描述】：

我在类组件 (react-js) 中使用来自 material-ui/pickers 的 datetimepicker。打开 datetimepicker 时，每当我按下任何地方（日期、年份、...）时，datetimepicker 都会立即关闭。 这是我正在使用的代码的 sn-p：

    import MomentUtils from '@date-io/moment';
    import  DateTimePicker, MuiPickersUtilsProvider  from '@material-ui/pickers';
    class ScheduleTest extends React.Component  
          constructor(props)  
              super(props);
              this.state = 
                   form:
                    scheduleStartDate: new Date(),
                   
             
             this.handleStartDateChange = this.handleStartDateChange.bind(this);
          
        handleStartDateChange(e) 
            const  form  = this.state;
            form.scheduleStartDate = e;
            this.setState( form );
        
     render()
     const  form  = this.state;
        return()
              <MuiPickersUtilsProvider utils=MomentUtils>
                <ThemeProvider theme=defaultMaterialTheme>
                  <DateTimePicker value=form.scheduleStartDate format=moment(form.scheduleStartDate).format('DD-MM-YYYY') onChange=this.handleStartDateChange />
                </ThemeProvider>
              </MuiPickersUtilsProvider>
  
  
 

有人知道可能是什么问题吗？ 提前致谢。

【参考方案1】：

如果您定义的组件名称与之前导入的组件名称相同，则会出现问题。您应该为组件选择另一个名称。这是不对的：

import  DateTimePicker, MuiPickersUtilsProvider  from '@material-ui/pickers';
class DateTimePicker extends React.Component  

【讨论】：

我改了类名，还是不行。问题依然存在。

@HodaIbrahim 我检查了你的代码，还有一个额外的错误语法。你应该在 ``return() ...``` -> return... 再次检查你的代码。我已经运行了你的代码，我得到了 2 个错误：TypeError: utils.getYearText is not a function 和 TypeError: utils.getDayText is not a function，我认为这 2 个错误是由 moment 和 materialui-pickers 引起的。我没有更多时间研究。无论如何，在我的项目中，我使用带有 date-fns 的 materialui-pickers，它工作正常，所以你应该尝试使用它。这是一个例子：material-ui-pickers.dev/getting-started/usage

@HodaIbrahim 使用 date-fns 安装 material-ui/pickers 时要注意：material-ui-pickers.dev/getting-started/installation。如果我的回答对您有帮助，请点赞并接受我的回答。非常感谢。