如何在React中正确捕获Materialize-CSS datepicker值? [英] How do I correctly capture Materialize-CSS datepicker value in React?

问题描述

我想在我的React组件中使用 datepicker 创建一个表单https://materializecss.com/"rel =" noreferrer> materialize-css .我没有很多字段可以捕获此表单，并且结构相当简单.返回的表单如下:

I am looking to create a form with a datepicker in my React component with materialize-css. I don't have many fields this form is capturing and the structure is fairly simple. The form returned looks like this:

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

and I have called the AutoInit to initialize my datepicker

M.AutoInit();

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

I've tried using onChange instead of onSelect to manage the datepicker state change, but it doesn't seem to capture that event. With onSelect used, the date sometimes gets capture if I pick a date then re-open the datepicker.

我还尝试了一些日期选择器的替代初始化方法，但没有用.

I have also tried using some of the alternate initialization methods for the datepicker to no avail.

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

How do I correctly capture the input change with my given setup?

推荐答案

您好，希望对您有所帮助-

Hi hopefully this will help somebody -

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

What happens with the <DatePicker /> component is that the default onChange method returns the date (2019-08-01) and not the the element's event handler object. In order to counter this we need to create an object inside the onChange method that mimics the eventhandler's target.id and target.value

< input/> 之类的其他组件正常工作.检查一下:

Other components like the <input /> works as per normal. Check it out:

这是组件的外观:

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

PS.这使用了React Hooks-但它也可以在普通类上使用.

PS. this uses React Hooks - but it will work on normal classes too.

这篇关于如何在React中正确捕获Materialize-CSS datepicker值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！