javascript - 如何在 React 中正确捕获 Materialize-CSS 日期选择器值？

Question

我希望创建一个带有 datepicker 的表单在我的 React 组件中使用 materialize-css .我没有这个表单捕获的很多字段，而且结构相当简单。返回的表单如下所示:

<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初始化我的日期选择器

M.AutoInit();

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

我也尝试过使用一些 alternate initialization methods for the datepicker无济于事。

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

Answer 1

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

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

<input/> 等其他组件正常工作。检查一下:

组件应该是这样的:

            <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 - 但它也适用于普通类。