如何使用React Materialize添加时间选择器？解决pickatime函数报错

这个报错我之前也踩过坑，本质是pickatime方法没有被正确挂载到jQuery对象上，大概率是依赖引入顺序不对或者使用方式有误。下面一步步帮你解决：

1. 先确认依赖安装完整 #

React Materialize依赖jQuery和Materialize CSS/JS，所以要确保这三个包都安装到位：

# 使用npm安装
npm install react-materialize materialize-css jquery

# 或者使用yarn安装
yarn add react-materialize materialize-css jquery

2. 按正确顺序引入依赖 #

在你的项目入口文件（比如src/index.js或src/App.js）中，必须先引入jQuery，再引入Materialize的JS文件——因为Materialize的组件方法（包括pickatime）需要挂载到jQuery上才能生效。示例代码：

import $ from 'jquery';
// 先引入Materialize的JS，再引入CSS
import 'materialize-css/dist/js/materialize.min.js';
import 'materialize-css/dist/css/materialize.min.css';

顺序错了的话，Materialize找不到jQuery对象，自然没法注册pickatime方法，就会出现你遇到的报错。

3. 正确使用React Materialize的TimePicker组件 #

不要手动调用$(...).pickatime()，直接用react-materialize封装好的组件，它会帮你自动处理DOM初始化和方法绑定：

import { TimePicker } from 'react-materialize';

function TimePickerDemo() {
  const handleTimeChange = (selectedTime) => {
    console.log('选中的时间：', selectedTime);
  };

  return (
    <div className="container">
      <TimePicker
        label="选择时间"
        onChange={handleTimeChange}
        // 可以添加Materialize的原生配置项
        options={{
          defaultTime: '12:00',
          twelveHour: false
        }}
      />
    </div>
  );
}

export default TimePickerDemo;

4. 排查其他潜在问题 #

• 不要同时通过CDN和npm包引入jQuery/Materialize，版本冲突会导致pickatime方法无法正常挂载；
• 确保react-materialize和materialize-css的版本兼容，尽量使用最新的稳定版；
• 如果是Create React App项目，检查public/index.html里有没有引入旧版本的jQuery或Materialize，避免和npm包的引入产生冲突。

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