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

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

1 个答案: