无法让 Materialize Picker 在 React 中工作

Question

我是 React 新手，似乎根本无法让我的 Materialize Picker 工作。

我已经安装并导入了所有 Materialize。

它显示正确，打开正确，但是当我选择一个日期时，我每次都显示错误，无法弄清楚原因。

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 Ninja 教程时，有些人可能会认出代码库，但为了我的学习添加了代码库。我还查看了以下stack 问题并尝试了他们的解决方案，因为它的代码也与我的相同，但它对我不起作用。

我检查了我的package.json，我正在使用“materialize-css”：“^1.0.0-rc.2”，但我没有使用react-materialize。

截图

初始加载

点击日期字段

设置日期，选择器关闭并获取

Answer 1

大多数时候我在定义回调时使用箭头函数。因为它处理 this 的范围与函数不同。尝试将 onSelect 回调替换为箭头函数：

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