如何使用反应日期选择器<DatePicker />正确使用或不使用钩子函数

Question

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

我遇到的问题是挂机电话。 我似乎找不到此挂钩调用的解决方法。 当用户在日历上选择日期时，所选日期将作为文本输入中的值。 这样做的方法是使用钩子调用，如网站所示。

现在这是我的问题。 我希望能够使用我已经编写的onChange函数（如果可能的话）来改变当前网页上的内容。 似乎钩子调用存在于render()函数调用之外的函数中，因为我收到错误： Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component... 当我尝试在onChange函数内部调用钩子时， 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>
        );
    }
}