React类组件项目集成MUI TimePicker遇报错问题求助

错误原因分析 #

1. renderInput is not a function：MUI X的TimePicker组件本身不自带输入框，必须通过renderInput属性传入一个渲染输入组件的函数（通常用MUI的TextField），否则会抛出该错误。
2. onChange必填警告：TimePicker的onChange是必填属性，必须提供处理时间变化的回调函数，和组件是类组件还是函数组件无关。

基础修复：类组件中单独使用TimePicker #

先修复必填属性问题，确保组件能正常渲染：

import * as React from 'react';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { TimePicker } from '@mui/x-date-pickers/TimePicker';
import TextField from '@mui/material/TextField';
import dayjs from 'dayjs';

class CommonlyUsedComponents extends React.Component {
  state = {
    selectedTime: dayjs() // 可初始化默认时间，或设为null
  };

  handleTimeChange = (newTime) => {
    this.setState({ selectedTime: newTime });
  };

  render() {
    return (
      <LocalizationProvider dateAdapter={AdapterDayjs}>
        <TimePicker
          label="选择时间"
          value={this.state.selectedTime}
          onChange={this.handleTimeChange}
          // 传入renderInput，用TextField渲染输入框
          renderInput={(params) => <TextField {...params} />}
        />
      </LocalizationProvider>
    );
  }
}

export default CommonlyUsedComponents;

结合Formik的类组件实现 #

如果要在Formik表单中使用，需要将TimePicker和Formik的表单状态绑定，用setFieldValue更新表单值：

import * as React from 'react';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { TimePicker } from '@mui/x-date-pickers/TimePicker';
import TextField from '@mui/material/TextField';
import { Formik, Form } from 'formik';
import dayjs from 'dayjs';

class CommonlyUsedComponents extends React.Component {
  render() {
    return (
      <Formik
        initialValues={{ appointmentTime: dayjs() }} // 初始化表单时间值
        onSubmit={(values) => {
          // 处理表单提交逻辑
          console.log('提交的时间:', values.appointmentTime.format('HH:mm'));
        }}
      >
        {({ values, setFieldValue }) => (
          <Form>
            <LocalizationProvider dateAdapter={AdapterDayjs}>
              <TimePicker
                label="预约时间"
                value={values.appointmentTime}
                // 用setFieldValue更新Formik表单中的对应字段
                onChange={(newTime) => setFieldValue('appointmentTime', newTime)}
                renderInput={(params) => <TextField {...params} />}
              />
            </LocalizationProvider>
            <button type="submit" style={{ marginTop: 16 }}>提交表单</button>
          </Form>
        )}
      </Formik>
    );
  }
}

export default CommonlyUsedComponents;

注意事项 #

• 确保已安装所有依赖包：

  npm install @mui/material @mui/x-date-pickers dayjs formik
  

• 报错和类组件无关：函数组件中使用TimePicker同样需要传入这两个必填属性，否则会出现相同错误。
• 若使用MUI X v5及以下版本，API可能略有差异，需对应调整写法，但核心要求（必填renderInput和onChange）一致。

内容的提问来源于stack exchange，提问作者The Old County