Как использовать React, jQuery и Materialize CSS в одном проекте?

Question

Я довольно новичок в Materialise, и я подумал, что смогу использовать его для разработки проекта с ReactJS. К сожалению, похоже, что jQuery не очень нравится React. Я попытался написать какой-то фиктивный код, который должен показывать ввод даты, предоставленной Materialize:

import React, { Component } from 'react';
import $ from 'jquery';
import 'materialize-css';

class App extends Component {
   componentDidMount() {
     $(document).ready(function() {
       $('.datepicker').datepicker({
         disableWeekends: true
    });
  })
}
render() {
  return (
    <div className="App">
      <div className="input-field">
        <input type="text" id="date" className="datepicker" />
        <label for="date">Choose a date you need me for...</label>
      </div>
    </div>
  );
 }
}
export default App;

Этот последний фрагмент кода не работает, я получаю

TypeError: jquery__WEBPACK_IMPORTED_MODULE_1___default(...)(...).datepicker is not a function

Я не большой поклонник jQuery, поэтому я могу отбросить его, если мне нужно, но есть ли способ, которым я все еще могу использовать его методы (к которым мне нужен доступ для Materialise)?

Answer 1

jQuery больше не является зависимостью для Materialize, поэтому используйте инициализацию js ванили вместо инициализации jQuery:

document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.datepicker');
    var instances = M.Datepicker.init(elems,{
       disableWeekends: true
    });

  });

Поскольку jQuery больше не является зависимости, все методы вызываются на экземпляре плагина. Вы можете получить экземпляр плагина следующим образом:

var instance = M.Datepicker.getInstance(elem);
instance.open();

https://materializecss.com/pickers.html