设置日期选择器 onChange 的状态

Question

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

代码如下：

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}
        />
      </>
    );
  }
}

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

Answer 2

我认为您应该尝试代替 this.setStartDate 、(e)=> this.setStartDate(e) 和其他

Answer 3

回答了3年，但我只想添加一个Typescript + Functional Component的例子。我使用 MomentJS 将日期解析为字符串。顺便说一句，我不认为每次用户更改结束日期时触发 axios.post 是个好主意。也许他们可能会选择错误的值。为什么不是 post 按钮？

import moment from "moment"

const YourFC = (): JSX.Element => {
  //The input type date accepts only "YYYY-MM-DD" format
  const now = moment(new Date()).format("YYYY-MM-DD")

  const [startDate, setStartDate] = useState<string | undefined>(now)
  const [endDate, setEndDate] = useState<string | undefined>(now)

  const post = ():void => {
    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);
    });
  }

  return (
    <>
      <Input
        type={"date"}
        value={startDate}
        onChange={(e: ChangeEvent<HTMLInputElement>) => setStartDate(e.currentTarget.value)}
      />
      <Input
        type={"date"}
        value={endDate}
        onChange={(e: ChangeEvent<HTMLInputElement>) => setEndDate(e.currentTarget.value)}
      />
      <Button onClick={post}>Post</Button>
    </>
  )
}

设置日期选择器 onChange 的状态

Setting state of Date Picker onChange

javascript

datetime

onchange

reactjs