javascript - 设置日期选择器 onChange 的状态

Question

我正在尝试使用 html 日期选择器根据当前选择的日期更新我的两个状态。两个州；开始日期和结束日期，它们都没有在更改时更新。基于这些更新的状态，我需要使用这些状态数据作为查询参数来获取数据。它仅控制初始状态日期。

代码如下:

import React, { Component } from "react";
import axios from "axios";

export default class Main extends Component {
  constructor() {
    super();


    var date = new Date();


    var newdate =
      date.getFullYear() +
      "-" +
      ("0" + (date.getMonth() + 1)) +
      "-" + 
      ("0" + (date.getDate())) ;



    this.state = {
      startdate: newdate,
      enddate: newdate,
      clicked: false
    };
  }


  setStartDate = e => {
      this.setState({
        startdate: e.target.value
      })

      console.log(this.state.startdate, 'STARTDATE');
  }



  setEndDate = e => {
    //console.log(e.target.value)

    this.setState({
      enddate: e.target.value,
    });

    console.log(this.state.enddate, 'ENDDATE');
    axios.post('http://132.148.144.133:5000/api/v2/resources/sentiments', {
        sentiment_type: 'positive',
        startdate:this.state.startdate,
        enddate: this.state.enddate
    })
    .then( (result) => {

        console.log(result.data)
    })
    .catch(err => {
        console.log(err)
    })
  }


  render() {
    return (
      <div>
        <label>From</label>
        <input
          type="date"
          name="startdate"
          value={this.state.startdate}
          onChange={this.setStartDate}
        />

        <label>To</label>
        <input
          type="date"
          name="enddate"
          value={this.state.enddate}
          onChange={this.setEndDate}
        />
      </div>
    );
  }
}

我必须在第二个输入框更新为选择器中的选定日期后立即获取数据。

Answer 1

用这段代码试一试:

import React, { Component } from "react";
import axios from "axios";

export default class Main extends Component {
  constructor() {
    super();
    const date = new Date();
    const newDate =
      date.getFullYear() +
      "-" +
      ("0" + (date.getMonth() + 1)) +
      "-" +
      ("0" + date.getDate());

    this.state = {
      startDate: newDate,
      endDate: newDate
    };
  }

  handleDateChange = ({ target: { name, value } }) => {
    this.setState({
      [name]: value
    });

    if (name === "endDate") {
      const { endDate, startDate } = this.state;
      axios
        .post("http://132.148.144.133:5000/api/v2/resources/sentiments", {
          sentiment_type: "positive",
          startdate: startDate,
          enddate: endDate
        })
        .then(result => {
          console.log(result.data);
        })
        .catch(err => {
          console.log(err);
        });
    }
  };

  render() {
    const { endDate, startDate } = this.state;
    console.log(this.state);
    return (
      <>
        <label>From</label>
        <input
          type="date"
          name="startDate"
          value={startDate}
          onChange={this.handleDateChange}
        />
        <label>To</label>
        <input
          type="date"
          name="endDate"
          value={endDate}
          onChange={this.handleDateChange}
        />
      </>
    );
  }
}

使用管理日期更改的通用方法更加简洁。我也觉得可以随意重构一下。让我知道它是否按您希望的方式工作。