如何在 React 中正确捕获 Materialize-CSS datepicker 值？

我希望创建一个带有日期选择器 https://materializecss.com/pickers.html在我的 React 组件中物化CSS https://materializecss.com/。该表单捕获的字段不多，而且结构相当简单。返回的表单如下所示：

<form onSubmit={this.handleSubmit.bind(this)}>
     <div className="container">
          <div className="card grey lighten-3">
               <div className="card-content black-text">
                    <span className="card-title">
                            <input placeholder="Event Name"
                                    name="name" value={this.state.name}
                                    onChange={this.handleStateChange.bind(this)}/>
                    </span>
                    <input name="description" placeholder="Description"
                                      value={this.state.description}
                                      onChange={this.handleStateChange.bind(this)}/>
                    <input name="image" placeholder="Image URL"
                                      value={this.state.image}
                                      onChange={this.handleStateChange.bind(this)}/>
                    <input placeholder="Start Date"
                                className="datepicker" name="startDate" value={this.state.startDate}
                                onSelect={this.handleStateChange.bind(this)}/>
                </div>
                <div class="card-action">
                    <div className="row">
                        <span>
                           <div className="col s3">
                               <input className="btn light-blue accent-1" type="submit" value="Submit"/>
                           </div>
                           <div className="col s3">
                               <a className="btn grey" onClick={this.handleExpand.bind(this)}>Cancel</a>
                           </div>
                       </span>
                   </div>
               </div>
           </div>
       </div>
   </form>

状态改变的处理方式是

handleStateChange(item) {
    this.setState({[item.target.name]: item.target.value});
}

我已经打电话给AutoInit https://materializecss.com/auto-init.html初始化我的日期选择器

M.AutoInit();

我尝试过使用onChange代替onSelect管理日期选择器状态更改，但它似乎没有捕获该事件。和onSelect使用过，如果我选择一个日期然后重新打开日期选择器，有时会捕获日期。

我也尝试过使用一些日期选择器的替代初始化方法 https://materializecss.com/pickers.html无济于事。

如何使用给定的设置正确捕获输入变化？

嗨，希望这会对某人有所帮助 -

会发生什么组件的不同之处在于默认的 onChange 方法返回日期 (2019-08-01)，而不是元素的事件处理程序对象。为了解决这个问题，我们需要在 onChange 方法中创建一个对象来模仿事件处理程序的 target.id 和 target.value

其他组件如正常工作。一探究竟：

该组件应如下所示：

            <DatePicker
                label="myDate"
                value={state.myDate}
                id="myDate"
                onChange={(newDate) => {
                    handleChange({
                        target: {
                            id: "myDate",
                            value: newDate
                        }
                    })
                }} />

这是完整的代码：

import React, { useState, useEffect } from "react";
import "materialize-css/dist/css/materialize.min.css";
import "materialize-css/dist/js/materialize.min.js";
import { DatePicker } from "react-materialize";

const PickDate = (props) => {

    const [state, setState] = useState({myName: "Mags", myDate: "2019-08-01"});

    const handleChange = (e) => {
        const key = e.target.id;
        const val = e.target.value;

        const newState = {...state};
        newState[key] = val;
        setState(newState);
    }

    return (
        <React.Fragment>
            <input type="text" value={state.myName} id="myName" onChange={handleChange} />
            <DatePicker
                label="myDate"
                value={state.myDate}
                id="myDate"
                onChange={(newDate) => {
                    handleChange({
                        target: {
                            id: "myDate",
                            value: newDate
                        }
                    })
                }} />
        </React.Fragment>
    );
}

export default PickDate;

附言。这使用了 React Hooks - 但它也适用于普通类。