如何正确使用react-datepicker <DatePicker />

Question

我正在使用React前端进行编码，在寻找一种在日历上选择日期的方法时，我遇到了一个名为"react-datepicker"的很酷的react模块。这几乎做了我需要的所有事情。我正在尝试使用在指南网站https://reactdatepicker.com/上看到的<DatePicker />组件

我遇到麻烦的是钩子调用。我似乎找不到解决此钩子调用的方法。当用户在日历上选择日期时，所选择的日期被放置为文本输入中的值。这样做的方式是使用钩子调用，如网站中所见。

现在我的问题来了。我希望能够使用我已经编写的onChange函数(如果可能的话)，它可以改变当前网页上的东西。当我尝试在onChange函数内部调用钩子时，似乎在render()函数调用之外的函数中存在钩子调用的问题，因为我得到了错误：Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component...。有没有办法改变DataPicker文本输入的文本输入值？这是我现在最好的尝试：

import React, { Component, useState } from "react"; 
...
import DatePicker from 'react-datepicker';
...
export class AddEvent extends Component {
...
    onChange = (handleChange) => (e, e2) => {
        if (e2 == null && e != null) {
            this.setState({ [e.target.name]: e.target.value });
        } else if (e2 === null && e === null) {
            //The value I really want to show up in the text box is the one set here
            //It can be accessed for this example as this.state.days[0]
            this.setState({ ...this.state, "days": [null]});
            handleChange();
        } else {
            ...
            if ... {
            ...
            } else{
                //The value I really want to show up in the text box is the one set here
                //It can be accessed for this example as this.state.days[0]
                this.setState({ ...this.state, "days": [e] });
                handleChange();
            }
        }            
    }

    render() {
        //The value I really want to show up in the text box is the one in this.state.days[0]
        const minDate = new Date();
        const [aDate, setDate] = useState(minDate);
        const handleChange = date => setDate(date);

        return(
            <div className="mt-4 mb-4">
                <form onSubmit={this.onSubmit}>
                    ...
                    <div>
                        <label>Choose the Day(s) the Event could/will occur on:</label>
                        <DatePicker name="day1" onChange={this.onChange(handleChange)} minDate = {minDate} dateFormat="mm/dd/yyyy" />
                    </div>
                    ...
                </form>
            </div>
        );
    }
}
...

Answer 1

钩子是仅限于功能组件的包含性功能。你可以‘升级’你的组件到功能上，或者只保留你所有的日期，在this.state中应该重新呈现哪个组件并使用this.setState来改变它。

我不确定我是否保持您的业务逻辑，但您应该这样做：

import React, { Component, useState } from "react"; 

import DatePicker from 'react-datepicker';

export class AddEvent extends Component {
    state = {
      ///you stafff
      miDate : new Date(),
    }

    onChange = (e, e2) => {
       this.state(state => ({...state, miDate: e.target.value}));

        if (e2 == null && e != null) {
            this.setState({ [e.target.name]: e.target.value });
        } else if (e2 === null && e === null) {
            //The value I really want to show up in the text box is the one set here
            //It can be accessed for this example as this.state.days[0]
            this.setState({ ...this.state, "days": [null]});

        } else {

              this.setState({ ...this.state, "days": [e] });
        }            
    }

    render() {
        //!!! you can not use hooks in functional component !!!!!
        // const minDate = new Date();
        // const [aDate, setDate] = useState(minDate);
        // const handleChange = date => setDate(date);

        return(
            <div className="mt-4 mb-4">
                <form onSubmit={this.onSubmit}>
                    ...
                    <div>
                        <label>Choose the Day(s) the Event could/will occur on:</label>
                        <DatePicker name="day1" onChange={this.onChange.bind(this)} minDate = {this.state.minDate} dateFormat="mm/dd/yyyy" />
                    </div>
                    ...
                </form>
            </div>
        );
    }
}