Не могу заставить Материализацию выбрать в React

Question

Я новичок в React и, похоже, не могу заставить работать мой Materialise Picker.

У меня установлены и импортированы все Materialise.

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

TypeError: Невозможно прочитать свойство 'completeBy' с неопределенным значением

Я добавил весь свой код ниже для моей тестовой страницы, на которой он находится в данный момент.

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { addToDo } from '../../store/actions/todoActions';
import { Redirect } from 'react-router-dom';
import M from "materialize-css";
//import moment from 'moment';

class AddToDo extends Component {
  state = {
    title: '',
    content: '',
    assignTo: '',
    completeBy: new Date(),
    format: 'ddd d, mmm',
    //formatMoment: 'ddd D, MMM'
  }

  handleChange = (e) => {
    this.setState({
      [e.target.id]: e.target.value
    })
  }
  handleSubmit = (e) => {
    e.preventDefault();

    this.props.addToDo(this.state);
    this.props.history.push('/');
  }
  handleCancel = (e) => {
    e.preventDefault();

    this.props.history.push('/');
  }
  canBeSubmitted() {
    const { title, content, assignTo } = this.state;

    return title.length > 0 && content.length > 0 && assignTo.length > 0;
  }
  componentDidMount() {
    let selects = document.querySelectorAll('select');
    let elems = document.querySelectorAll('.datepicker');

    M.Datepicker.init(elems, {
      defaultDate: new Date(),
      format: this.state.format,
      container: 'body',
      onSelect: function(date) {
        this.setState({ completeBy: this.state.completeBy }); // Errors here
      },
      autoClose: true
    });

    M.FormSelect.init(selects, {});
  }
  render() {
    const { auth } = this.props;
    const isEnabled = this.canBeSubmitted();

    if (!auth.uid) {
      return <Redirect to='/login' />
    }

    return (
      <div className="container">
        <form className="white" onSubmit={ this.handleSubmit }>
          <h5 className="grey-text text-darken-3">Add a new todo item</h5>
          <div className="input-field">
            <input type="text" id='title' onChange={ this.handleChange } autoFocus />
            <label htmlFor="title">Todo title <span className="red-text">*</span></label>
          </div>
          <div className="input-field">
            <textarea id="content" className="materialize-textarea" onChange={ this.handleChange }></textarea>
            <label htmlFor="content">Todo content <span className="red-text">*</span></label>
          </div>
          <div className="input-field">
            <select id="assignTo" onChange={ this.handleChange }>
              <option value="default" disabled selected>Please select</option>
              <option value="Kyle">Kyle</option>
              <option value="Mike">Mike</option>
              <option value="Tony">Tony</option>
            </select>
            <label htmlFor="assignTo">Assign todo to <span className="red-text">*</span></label>
          </div>
          <div className="input-field">
            <label htmlFor="completeBy">To be completed by</label>
            <input
              id="completeBy"
              type="text"
              className="datepicker dateset"
              // defaultValue={ moment(this.state.completeBy).format(
              //   this.state.formatMoment
              // )}
            />
          </div>
          <div className="row">
            <div className="col s12 l1">
              <button className="btn pink lighten-1 col s12" disabled={!isEnabled}>Add</button>
            </div>
            <div className="col s12 l1">
              <button onClick={this.handleCancel} className="btn yellow darken-2 col s12">Cancel</button>
            </div>
          </div>
        </form>
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    auth: state.firebase.auth
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    addToDo: (todo) => dispatch(addToDo(todo))
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(AddToDo)

Некоторые могут распознавать кодовую базу, когда я следовал Net учебникам по ниндзя, но добавлял ее для своего обучения. Я также взглянул на следующий stack вопрос и попробовал их решение так же, как и мой, но оно не работает для меня.

Я проверил свой package.json и я использую "materialize- css": "^ 1.0.0-r c .2", и я не использую react-materialize.

Скриншоты

Начальная загрузка

Щелкните в поле даты

Установите дату, сборщик закроется и получите

Answer 1

Большую часть времени я использую функции стрелок при определении обратных вызовов. Потому что он обрабатывает сферу этого иначе, чем функция. Попробуйте заменить функцию обратного вызова onSelect на функцию стрелки:

M.Datepicker.init(elems, {
  defaultDate: new Date(),
  format: this.state.format,
  container: 'body',
  onSelect: (date) => {
    this.setState({ completeBy: this.state.completeBy }); 
  },
  autoClose: true
});