[英]How to use react-datepicker <DatePicker /> properly with or without hook functions
I'm coding with a React frontend, and while looking for a way to select days on a calendar, I came across a cool react module called "react-datepicker"
.我正在使用 React 前端进行编码,在寻找一种在日历上选择日期的方法时,我遇到了一个很酷的 React 模块,名为
"react-datepicker"
。 This does practically everything I need.这几乎完成了我需要的一切。 I'm trying to use the
<DatePicker />
component as seen on the guide website: https://reactdatepicker.com/我正在尝试使用指南网站上的
<DatePicker />
组件: https : //reactdatepicker.com/
What I'm having trouble with is the hook call.我遇到的问题是挂机电话。 I can't seem to find a workaround for this hook call.
我似乎找不到此挂钩调用的解决方法。 When a user selects a date on the calendar, the date that is selected is placed as the value in the text-input.
当用户在日历上选择日期时,所选日期将作为文本输入中的值。 The way that this is done is with a hook call as seen in the website.
这样做的方法是使用钩子调用,如网站所示。
Now here's my issue.现在这是我的问题。 I would like to be able to use the
onChange
function that I've already written (if it's possible) that changes things on the webpage currently.我希望能够使用我已经编写的
onChange
函数(如果可能的话)来改变当前网页上的内容。 It seems that there is an issue with hook calls being in functions outside the render()
function call, as I get the error: Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component...
似乎钩子调用存在于
render()
函数调用之外的函数中,因为我收到错误: Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component...
Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component...
, when I try to call the hook inside of my onChange
function.当我尝试在
onChange
函数内部调用钩子时, Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component...
内部调用钩子。 Is there a work around for changing the text-input value for the DataPicker text input?是否有更改 DataPicker 文本输入的文本输入值的解决方法? Here's what my best attempt looks like right now:
这是我现在最好的尝试:
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>
);
}
}
...
Hooks are inclusive functionality restricted only to functional component.挂钩是仅限于功能组件的包容性功能。 You can 'upgrade' your component to functional or just keep all your date on witch change component should be re-rendered in this.state and using this.setState to change it.
您可以“升级”您的组件以使其正常工作,或者只是保留所有日期,更改组件应在 this.state 中重新呈现并使用 this.setState 来更改它。
i'm not sure that i keep you business logic but you should doing this in that way:我不确定我是否保留了您的业务逻辑,但您应该这样做:
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>
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.