reactjs - ReactJS DatePicker 在提升状态后停止工作
问题描述
当我将状态保留在 Datepicker 本身时,ReactJS DatePicker 工作正常,但是一旦我提升状态,它就会停止工作 - 当我选择一个日期时没有任何反应。
此代码有效:
import React from "react";
import ReactDOM from "react-dom";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
class Datepicker extends React.Component {
constructor(props) {
super(props);
this.state = {
date: new Date()
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(date) {
this.setState({
date: date
});
}
render() {
return <DatePicker selected={this.state.date} onChange={this.handleChange} />;
}
}
class Index extends React.Component {
render() {
return (
<div>
<Datepicker />
</div>
);
}
}
ReactDOM.render(<Index />, document.getElementById("root"));
但是这段代码不起作用- 当我在日期选择器中选择一个日期时没有任何反应:
import React from "react";
import ReactDOM from "react-dom";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
class Datepicker extends React.Component {
render() {
return (
<DatePicker
selected={this.props.date}
onChange={() => {
this.props.handleChange(this.props.date);
}}
/>
);
}
}
class Index extends React.Component {
constructor(props) {
super(props);
this.state = {
date: new Date()
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(date) {
this.setState({
date: date
});
}
render() {
return (
<div>
<Datepicker date={this.state.date} handleChange={this.handleChange} />
</div>
);
}
}
ReactDOM.render(<Index />, document.getElementById("root"));
我还在这里上传了代码示例(index.js 在 index2.js 工作时没有按预期工作)。
如果有人能建议如何提升状态并同时让 Datepicker 工作,将不胜感激。
解决方案
问题是您将传递this.props.date
到handleChange
永远不会改变的函数中。
您可以简单地删除箭头函数并直接调用this.props.handleChange
而不传递任何参数。它应该自动选择所选的新日期值。
import React from "react";
import ReactDOM from "react-dom";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
const Datepicker = props => (
<DatePicker selected={props.date} onChange={props.handleChange} />
);
class Index extends React.Component {
constructor(props) {
super(props);
this.state = {
date: new Date()
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(date) {
this.setState({
date: date
});
}
render() {
return (
<Datepicker
date={this.state.date}
handleChange={this.handleChange}
/>
);
}
}
ReactDOM.render(<Index />, document.getElementById("root"));
查看一个工作示例:https ://codesandbox.io/s/my4zp6rj8y
推荐阅读
- python - 如何从其他格式导出 sbml 文件,例如 graphml?
- sql - 你能帮我理解 INNER JOIN ON 的条款吗
- snowflake-cloud-data-platform - 无法通过 DBeaver 连接雪花数据库
- spring-boot - 基于证书的身份验证,客户端共享证书到服务器
- python - Django,如何在泛型视图的 form_valid 函数中创建对象实例(id)?
- mysql - 如何从 JSON 列中获取所有不同的属性名称?
- javascript - jQuery 切换单选按钮
- php - 如何(重新)组织这些数据 - Lumen/Laravel
- java - 正好 OR 的正则表达式包含
- error-handling - 范围的起始列太小。(第 50 行,文件“清除单元格”)