javascript - 如何使用反应日期选择器正确使用或不使用钩子功能
问题描述
我正在使用 React 前端进行编码,在寻找一种在日历上选择日期的方法时,我遇到了一个很酷的 react 模块,名为"react-datepicker"
. 这几乎可以满足我的所有需求。我正在尝试使用<DatePicker />
指南网站上看到的组件:https ://reactdatepicker.com/
我遇到的麻烦是挂钩电话。我似乎找不到这个钩子调用的解决方法。当用户在日历上选择一个日期时,选择的日期将作为文本输入中的值放置。完成此操作的方法是使用网站上的钩子调用。
现在这是我的问题。我希望能够使用onChange
我已经编写的功能(如果可能的话)来改变当前网页上的内容。似乎在函数调用之外的函数中存在钩子调用的问题,因为当我尝试在函数内部调用钩子时render()
出现错误:。是否有解决方法来更改 DataPicker 文本输入的文本输入值?这是我现在最好的尝试:Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component...
onChange
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>
);
}
}
...
解决方案
钩子是仅限于功能组件的包容性功能。您可以“升级”您的组件以使其正常运行,或者只保留所有关于女巫更改组件的日期应该在 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>
);
}
}
推荐阅读
- google-cloud-platform - 如何从 GCP SSH 到另一台服务器
- mysql - Java:无需时间转换即可保存日期时间
- macos - 使用 AppleScript 通过 Outlook for Mac 发送电子邮件不再有效
- c++ - 我在 C++ 中没有得到所需的反向数字代码输出
- python - 如何指定pytorch nn.Linear的输入维度?
- reactjs - NextJS Router.push 不适用于某些用例
- pdf - PDF 标准是否提供了一种存储可提取(语义)文本的方法?
- java - 如何根据旁边的数字打印字符序列?
- bash - 带有#text的csv上的awk / sed
- drools - OptaPlanner:可空计划变量未按预期工作