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

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

沙盒链接： 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 fileimport "react-date-range/dist/theme/default.css"; // theme css fileexport default class App extends React.Component {&nbsp; constructor(props) {&nbsp; &nbsp; super(props)&nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; selectionRange : {&nbsp; &nbsp; &nbsp; &nbsp; startDate: new Date(),&nbsp; &nbsp; &nbsp; &nbsp; endDate: new Date(),&nbsp; &nbsp; &nbsp; &nbsp; key: "selection"&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp;&nbsp; }&nbsp; handleSelect=(ranges)=> {&nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; selectionRange : {&nbsp; &nbsp; &nbsp; &nbsp; startDate: ranges.selection.startDate,&nbsp; &nbsp; &nbsp; &nbsp; endDate: ranges.selection.endDate,&nbsp; &nbsp; &nbsp; &nbsp; key: "selection"&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; })&nbsp;&nbsp;&nbsp; &nbsp; console.log(ranges.selection.endDate);&nbsp; }&nbsp; render() {&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <DateRangePicker ranges={[this.state.selectionRange]} onChange={this.handleSelect} />&nbsp; &nbsp; );&nbsp; }}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 fileimport "react-date-range/dist/theme/default.css"; // theme css fileexport default class App extends React.Component {&nbsp; constructor(props) {&nbsp; &nbsp; super(props);&nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; range: {&nbsp; &nbsp; &nbsp; startDate: new Date(),&nbsp; &nbsp; &nbsp; endDate: new Date(),&nbsp; &nbsp; &nbsp; key: "selection"&nbsp; &nbsp; }};&nbsp; &nbsp; this.handleSelect = this.handleSelect.bind(this);&nbsp; }&nbsp;&nbsp;&nbsp; handleSelect(ranges) {&nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; range: ranges.selection&nbsp; &nbsp; });&nbsp; }&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <DateRangePicker ranges={[this.state.range]} onChange={this.handleSelect} />&nbsp; &nbsp; );&nbsp; }}render(<App />, document.querySelector("#root"));