下面我提到一个React日期范围选择器的链接。它有两个参数:一个是date picker，另一个是date range picker。我想在同一个URL中包含这两个参数，以便向API端点发送GET请求。
最终的API端点URL应该像这样:
http://127.0.0.1:8000/create_keyValue?key=<date_picker_value>&value=<date_range_value>
我如何使用用户在这个React组件中选择的两个日期值更新这个API端点?
React日期范围选择器代码
import React, { Component } from "react";
import axios from "axios";
import App from "./Date_range";
class PostList extends Component {
url = "http://127.0.0.1:8000/create_keyValue?key=";
constructor(props) {
super(props);
this.state = {
posts: [],
date: ""
};
}
componentDidUpdate() {
axios.get(this.url + this.state.date).then((response) => {
this.setState({
posts: response.data
});
console.log(response.data);
});
}
render() {
const { posts } = this.state;
return (
<div>
<App />
onChange={(e) =>
this.setState({ ...this.state, data: e.target.value })
}
{posts.length &&
posts.map((post) => <div key={post.id}>{post.id} </div>)}
</div>
);
}
}
export default PostList;
如果我没有错的话，你正在学习React。让我告诉你
首先你必须设置datePicker范围和价值"State"那么你必须得到"datePicker"范围和值从状态和添加URL
,
let {datePicker , range} = this.state
let URL = `http://127.0.0.1:8000/create_keyValue?date=${datePicker}?rang=${rang}`;如果您希望您的用户能够选择日期并更新您的帖子列表以反映所选日期，那么您将需要使用componentDidUpdate，并将日期选择器变量存储在本地状态。
如果MaterialUIDateRange组件的onChange事件处理程序返回两个值(开始和结束日期)的数组，按照这些文档，那么您可以做以下事情:
class PostList extends Component {
url = "http://127.0.0.1:8000/create_keyValue?";
constructor(props) {
super(props);
this.state = {
posts: [],
date: "",
range: [null, null]
};
}
onNewDateSelected(value) {
this.setState({ ...this.state, date: value });
}
onNewRangeSelected(value) {
this.setState({ ...this.state, range: value });
}
componentDidUpdate() {
// You can use string interpolation here to assemble your new query
// using any string you have saved in state.
axios
.get(
`${this.url}date=${this.state.date}&rangeStart=${this.date.range[0]}&rangeEnd=${this.date.range[1]}`
)
.then((response) => {
this.setState({
posts: response.data
});
console.log(response.data);
});
}
render() {
const { posts, date, range } = this.state;
return (
<div>
<App />
<Body />
<DatePicker onChange={onNewDateSelected} value={date} />
<MaterialUIRangePicker onChange={onNewRangeSelected} value={range} />
{posts.length &&
posts.map((post) => <div key={post.id}>{post.id} </div>)}
</div>
);
}
}