ReactJS DatePicker перестает работать после поднятия состояния

Question

ReactJS DatePicker работает нормально, когда я сохраняю состояние внутри самого 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.

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