A continuación menciono un enlace para un selector de rango de fechas de React. Toma 2 parámetros: uno es date picker , otro es date range picker . Quiero incluir esos dos parámetros en la misma URL para enviar una solicitud GET a un punto final de la API.
La URL final del punto final de la API debería tener este aspecto:
http://127.0.0.1:8000/create_keyValue?key=<date_picker_value>&value=<date_range_value>
¿Cómo puedo actualizar este punto final de API utilizando los dos valores de fecha seleccionados por el usuario en este componente de React?
Reaccionar código selector de rango de fechas
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;Si desea que sus usuarios puedan seleccionar fechas y que su lista de publicaciones se actualice para reflejar la fecha elegida, entonces querrá usar componentDidUpdate y almacenar su variable de selector de fecha en el estado local.
Si el controlador de eventos onChange del componente MaterialUIDateRange devuelve una matriz de dos valores (fecha de inicio y finalización), según estos documentos , entonces podría hacer algo como lo siguiente:
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> ); } }si no me equivoco estás aprendiendo React. déjame decirte que
primero debe establecer el valor de datePicker y Range en "State". luego debe obtener "datePicker" y el valor de rango del estado y agregar la URL
p.ej:
let {datePicker , range} = this.state let URL = `http://127.0.0.1:8000/create_keyValue?date=${datePicker}?rang=${rang}`;