Javascript 如何在React中正确捕获MaterializeCSS日期选择器值？

我希望创建一个表单，在我的React组件中使用。我没有太多的字段，这个表单正在捕获，而且结构相当简单。返回的表单如下所示：

<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>

我已经调用了初始化我的日期选择器

M.AutoInit();

我尝试使用

onChange

而不是

onSelect

来管理datepicker状态更改，但它似乎无法捕获该事件。使用了

onSelect

，如果我选择了一个日期，然后重新打开日期选择器，则有时会捕获该日期

我也试着用了一些，但没有用

---

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

在研究了所有关于React生命周期的周六之后。我得到了这个解决方案：

组件的使用：

    <DatePicker label="Fecha" value={this.state.formSchedule.start} 
onChange={(date) => {
    this.state.formSchedule.start = date;
    this.setState({ formSchedule: this.state.formSchedule });
}}/>

{
this.state.formSchedule.start=日期；
this.setState（{formSchedule:this.state.formSchedule}）；
}}/>

类DatePicker.tsx：

    import * as React from 'react';
import Materialize from 'materialize-css';
import moment from 'moment'
import 'moment/locale/es'
import { any } from 'prop-types';


interface IState {
  value: any;
}

interface IProps {
  label: any;
  format: any;
  onChange: any;
  formatMoment: any;
}

export default class DatePicker extends React.Component<IProps, IState> {

  static defaultProps = {
    label: "Fecha",
    value: new Date(),
    format: 'ddd d, mmm',
    formatMoment: 'ddd D, MMM'
  }

  constructor(props: any) {
    super(props);
    this.componentWillReceiveProps(props);
  }

  componentWillReceiveProps(props) {
    this.state = {
      value: props.value
    };
  }

  render() {
    return <div className="input-field col s6">
      <i className="material-icons prefix">date_range</i>
      <input id="date" type="text" className="datepicker queso"
        value={moment(this.state.value).locale('es').format(this.props.formatMoment)}
      />
      <label className="active" htmlFor="date">{this.props.label}</label>
    </div>;
  }


  componentDidMount() {
    var context = this;

    var elems = document.querySelectorAll('.queso');
    Materialize.Datepicker.init(elems, {
      defaultDate: new Date(),
      format: this.props.format,
      container: 'body',
      onSelect: function (date) {
        context.setState({ value: context.state.value });
        context.props.onChange(date);
      },
      autoClose: true
    } as Partial<any>);

  }
}

import*as React from'React'；
从“物化css”导入物化；
从“时刻”导入时刻
导入“时刻/区域设置/es”
从“道具类型”导入{any}；
界面状态{
价值：任何；
}
接口IProps{
标签：任何；
格式：任意；
onChange：任何；
形成时刻：任何；
}
导出默认类DatePicker扩展React.Component{
静态defaultProps={
标签：“Fecha”，
值：新日期（），
格式：“ddd，mmm”，
形成时刻：“ddd，MMM”
}
构造器（道具：任何）{
超级（道具）；
此组件将接收道具（道具）；
}
组件将接收道具（道具）{
此.state={
价值：道具价值
};
}
render（）{
返回
日期范围
{this.props.label}
;
}
componentDidMount（）{
var context=this；
var elems=document.querySelectorAll（'.queso'）；
Materialize.Datepicker.init（元素{
defaultDate:新日期（），
格式：this.props.format，
容器：'主体'，
onSelect：功能（日期）{
context.setState（{value:context.state.value}）；
context.props.onChange（日期）；
},
自动关闭：正确
}作为部分）；
}
}
谢谢卢卡斯，你的回答也帮助了我

这是我的解决方案-没有redux或道具，只有具有自己状态的类组件

import React, { Component } from "react";
import "./calendar.css";
import Materialize from "materialize-css";
import moment from "moment";

class Calendar extends Component {
  componentDidMount() {
    var context = this;

    var elems = document.querySelectorAll(".dateset");
    Materialize.Datepicker.init(elems, {
      defaultDate: new Date(),
      format: this.state.format,
      container: "body",
      onSelect: function(date) {
        context.setState({ value: context.state.value });
        console.log(date); // Selected date is logged
      },
      autoClose: true
    });
  }

  state = {
    value: new Date(),
    format: "ddd d, mmm",
    formatMoment: "ddd D, MMM"
  };

  render() {
    return (
      <div className="input-field col s6">
        <i className="material-icons prefix">date_range</i>
        <input
          id="date"
          type="text"
          className="datepicker dateset"
          defaultValue={moment(this.state.value).format(
            this.state.formatMoment
          )}
        />
      </div>
    );
  }
}

export default Calendar;

import React，{Component}来自“React”；
导入“/calendar.css”；
从“物化css”导入物化；
从“时刻”中导入时刻；
类日历扩展组件{
componentDidMount（）{
var context=this；
var elems=document.querySelectorAll（“.dateset”）；
Materialize.Datepicker.init（元素{
defaultDate:新日期（），
格式：this.state.format，
容器：“主体”，
onSelect：功能（日期）{
context.setState（{value:context.state.value}）；
console.log（日期）；//记录所选日期
},
自动关闭：正确
});
}
状态={
值：新日期（），
格式：“ddd，mmm”，
形成时刻：“ddd，MMM”
};
render（）{
返回(
日期范围
);
}
}
导出默认日历；
您好，希望这会对某人有所帮助-

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

其他组件，如正常工作。请查看：

这就是组件的外观：

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

{
手换({
目标：{
id:“myDate”，
值：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;

import React，{useState，useffect}来自“React”；
导入“MaterializeCSS/dist/css/materialize.min.css”；
导入“MaterializeCSS/dist/js/materialize.min.js”；
从“react materialize”导入{DatePicker}；
const PickDate=（道具）=>{
const[state，setState]=useState（{myName:“Mags”，myDate:“2019-08-01”}）；
常数handleChange=（e）=>{
const key=e.target.id；
const val=e.target.value；
const newState={…state}；
newState[key]=val；
设置状态（newState）；
}
返回(
{
手换({
目标：{
id:“myDate”，
值：newDate
}
})
}} />
);
}
导出默认选取日期；

注：这使用了React钩子——但它也适用于普通类。
已经添加的答案对我没有帮助，所以我决定用我的方式来做。
我没有将Materialize和jQuery安装到我的模块中，只是将它们添加到index.html中

当你们点击输入字段时，datepicker模式窗口打开，有两个按钮CANCEL和OK。我通过jQuery和addclick函数找到OK按钮，它从输入字段中获取值并更新状态

componentDidMount（）{
窗口。$（“.datepicker完成”）。单击（（）=>{
var datepickerValue=window.$（“#日期输入”）.val（）；//日期输入在日期选择器输入上是'id'
this.setState（{approxLastDay:datepickerValue}）；
});
}

注意：datepickerValue将采用字符串格式（例如“2019年8月6日”）
我遇到了同样的问题，下面是我的解决方案

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

class CreateReport extends Component {
    constructor(props) {
        super(props);
        this.state = {
            startDate: '',
            endDate: ''
        };
        // refs for startDate, endDate
        this.startDate = React.createRef();
        this.endDate = React.createRef();
    }
    componentDidMount() {
        var context = this;
        document.addEventListener('DOMContentLoaded', function () {
            var start = document.querySelectorAll('.datepicker');
            M.Datepicker.init(start, {
                format: "mm/dd/yyyy",
                autoClose: true,
                onClose: context.handleDate
            });
        });
    }
    handleDate = () => {
        this.setState({
            startDate: this.startDate.current.value,
            endDate: this.endDate.current.value,
        })
        // console.log(this.state.startDate)
        // console.log(this.state.endDate)
    }
    handleChange = (e) => {
        this.setState({
            [e.target.id]: e.target.value
        })
    }
    handleSumbit = (e) => {
        e.preventDefault();
        console.log(this.state)
    }
    render() {
        return (
            <div>
                <div className="container">
                    <form onSubmit={this.handleSumbit} className="white col s12 m6">

                        <div className="row">
                            <div className="input-field col s3 offset-s2">
                                <label htmlFor="date">Start Date</label>
                                <input
                                    type="text"
                                    className="datepicker"
                                    id="startDate"
                                    onChange={this.handleChange}
                                    value={this.state.startDate}
                                    ref={this.startDate}
                                />
                            </div>
                            <div className="input-field col s3 offset-s2">
                                <label htmlFor="date">End Date</label>
                                <input
                                    type="text"
                                    className="datepicker"
                                    id="endDate"
                                    onChange={this.handleChange}
                                    value={this.state.endDate}
                                    ref={this.endDate} />
                            </div>
                        </div>
                        <div className="col s8 offset-s2 center-align">
                            <button className="btn pink lighten-1 z-depth-0 ">Sign Up</button>
                        </div>

                    </form>
                </div>
            </div >
        )
    }
}
export default CreateReport

import React，{Component}来自“React”
从“物化css”导入M；
类CreateReport扩展组件{
建造师（道具）{
超级（道具）；
此.state={
起始日期：''，
结束日期：“”
};
//起始日期、结束日期的参考
this.startDate=React.createRef（）；
这个是.endDat
import React, { Component } from 'react'
import M from 'materialize-css';

class CreateReport extends Component {
    constructor(props) {
        super(props);
        this.state = {
            startDate: '',
            endDate: ''
        };
        // refs for startDate, endDate
        this.startDate = React.createRef();
        this.endDate = React.createRef();
    }
    componentDidMount() {
        var context = this;
        document.addEventListener('DOMContentLoaded', function () {
            var start = document.querySelectorAll('.datepicker');
            M.Datepicker.init(start, {
                format: "mm/dd/yyyy",
                autoClose: true,
                onClose: context.handleDate
            });
        });
    }
    handleDate = () => {
        this.setState({
            startDate: this.startDate.current.value,
            endDate: this.endDate.current.value,
        })
        // console.log(this.state.startDate)
        // console.log(this.state.endDate)
    }
    handleChange = (e) => {
        this.setState({
            [e.target.id]: e.target.value
        })
    }
    handleSumbit = (e) => {
        e.preventDefault();
        console.log(this.state)
    }
    render() {
        return (
            <div>
                <div className="container">
                    <form onSubmit={this.handleSumbit} className="white col s12 m6">

                        <div className="row">
                            <div className="input-field col s3 offset-s2">
                                <label htmlFor="date">Start Date</label>
                                <input
                                    type="text"
                                    className="datepicker"
                                    id="startDate"
                                    onChange={this.handleChange}
                                    value={this.state.startDate}
                                    ref={this.startDate}
                                />
                            </div>
                            <div className="input-field col s3 offset-s2">
                                <label htmlFor="date">End Date</label>
                                <input
                                    type="text"
                                    className="datepicker"
                                    id="endDate"
                                    onChange={this.handleChange}
                                    value={this.state.endDate}
                                    ref={this.endDate} />
                            </div>
                        </div>
                        <div className="col s8 offset-s2 center-align">
                            <button className="btn pink lighten-1 z-depth-0 ">Sign Up</button>
                        </div>

                    </form>
                </div>
            </div >
        )
    }
}
export default CreateReport

const troubles = document.querySelectorAll(".trouble");
troubles.forEach((item) => {
  item.addEventListener("change", (e) => {
    e.target._valueTracker.setValue("UPDATE!");
  });
});