我正在尝试使用html日期选择器根据当前选择的日期更新我的两个状态。两种状态; startdate和enddate,它们都没有在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>
);
}
}
第二个输入框使用选择器中的选定日期进行更新后,我必须立即获取数据。
答案 0 :(得分:3)
尝试使用以下代码:
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}
/>
</>
);
}
}
使用管理日期更改的通用方法,它更清洁。我也可以随意重构它。让我知道它是否按您想要的方式工作。
答案 1 :(得分:0)
我认为您应该尝试代替this.setStartDate
,(e)=> this.setStartDate(e)
和其他