亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

選擇時反應日期范圍不填充輸入日期字段

選擇時反應日期范圍不填充輸入日期字段

慕神8447489 2022-10-27 14:50:27
我正在嘗試使用這個反應類(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
查看完整描述

2 回答

?
慕工程0101907

TA貢獻1887條經驗 獲得超5個贊

您只是缺少狀態更改。你可以像下面這樣


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


查看完整回答
反對 回復 2022-10-27
?
繁星coding

TA貢獻1797條經驗 獲得超4個贊

缺少更新和綁定到的狀態管理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"));


查看完整回答
反對 回復 2022-10-27
  • 2 回答
  • 0 關注
  • 88 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號