ReactJS DatePicker 在提升状态后停止工作

Question

当我将状态保留在 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"));

我还上传了代码示例here（在 index2.js 工作时，index.js 没有按预期工作）。

如果有人能建议如何提升状态并同时让 Datepicker 正常工作，我们将不胜感激。

Answer 1

问题是您将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