选择时 React Date Range 不填充输入日期字段

Question

我正在尝试使用此反应 class (react-date-range) 来导入日期范围选择器组件，但是当我 select 日期未更新到两个输入字段。谁能帮我识别并解决它？

下面的代码和沙盒到：

import React from "react";
import "./styles.css";
import { render } from "react-dom";
import { DateRangePicker } from 'react-date-range';
import 'react-date-range/dist/styles.css'; // main style file
import 'react-date-range/dist/theme/default.css'; // theme css file
export default class App extends React.Component {
  handleSelect(ranges){
    console.log(ranges);

  }
  render(){
    const selectionRange = {
      startDate: new Date(),
      endDate: new Date(),
      key: 'selection',
    }
    return (
      <DateRangePicker
        ranges={[selectionRange]}
        onChange={this.handleSelect}
      />
    )
  }
}
render(<App />, document.querySelector("#root"));

沙盒link： https://codesandbox.io/s/pedantic-kapitsa-trglh?file=/src/App.js

Answer 1

缺少更新和绑定到 DateRangePicker 的状态管理：

import React from "react";
import "./styles.css";
import { render } from "react-dom";
import { DateRangePicker } from "react-date-range";
import "react-date-range/dist/styles.css"; // main style file
import "react-date-range/dist/theme/default.css"; // theme css file

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      range: {
      startDate: new Date(),
      endDate: new Date(),
      key: "selection"
    }};
    this.handleSelect = this.handleSelect.bind(this);
  }
  
  handleSelect(ranges) {
    this.setState({
      range: ranges.selection
    });
  }

  render() {
    return (
      <DateRangePicker ranges={[this.state.range]} onChange={this.handleSelect} />
    );
  }
}
render(<App />, document.querySelector("#root"));

Answer 2

您只是错过了状态变化。你可以像下面那样做

import React from "react";
import "./styles.css";
import { render } from "react-dom";
import { DateRangePicker } from "react-date-range";
import "react-date-range/dist/styles.css"; // main style file
import "react-date-range/dist/theme/default.css"; // theme css file
export default class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      selectionRange : {
        startDate: new Date(),
        endDate: new Date(),
        key: "selection"
      }
    } 
  }

  handleSelect=(ranges)=> {
    this.setState({
      selectionRange : {
        startDate: ranges.selection.startDate,
        endDate: ranges.selection.endDate,
        key: "selection"
      }
    })
  
    console.log(ranges.selection.endDate);
  }
  render() {
    
    return (
      <DateRangePicker ranges={[this.state.selectionRange]} onChange={this.handleSelect} />
    );
  }
}
render(<App />, document.querySelector("#root"));

选择时 React Date Range 不填充输入日期字段

React Date Range not filling input date fields when selected

javascript

user-input

daterangepicker

reactjs

react-component