选择时反应日期范围不填充输入日期字段

Question

我正在尝试使用这个反应类（react-date-range）来导入日期范围选择器组件，但是当我选择日期时，日期不会更新到两个输入字段中。谁能帮我识别和解决它？下面的代码和沙箱：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 fileimport 'react-date-range/dist/theme/default.css'; // theme css fileexport 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"));沙盒链接： https ://codesandbox.io/s/pedantic-kapitsa-trglh?file=/src/App.js

Answer 1

您只是缺少状态更改。你可以像下面这样

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"));

Answer 2

缺少更新和绑定到的状态管理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"));