Estoy tratando de crear un formulario de rango donde envíe los datos modificados al backend de Flask en cualquier cambio para que sea perfecto. Similar a cómo funciona la barra de seguimiento de openCV.
import { useState } from "react"; const SlideBarFg = (props) => { const [slideLowHue, setSlideLowHue] = useState(''); const handleChangeLowHue = (event) => { setSlideLowHue(event.target.value); event.preventDefault(); event.target.form.requestSubmit(); }; return( <form method="POST"> <label htmlFor="lowHue">Lower Hue: {slideLowHue}</label> <input id = "lowHue" type = "range" min = {0} max = {179} step = {1.0} defaultValue = {0} onChange={handleChangeLowHue} /> </form> ); }; export default SlideBarFg; También intenté agregar un <form onSubmit = {submitHandler}> e hice event.preventDefault() allí.
No importa lo que intenté, todavía se actualizó y parece que no muchos han tenido esta combinación de tener que enviar onChange y no actualizar, al menos por lo que encontré.
Gracias a @RandyCasburn
import { useState } from "react"; const SlideBarFg = (props) => { const [slideLowHue, setSlideLowHue] = useState(0); const updateFg = () => { const specs = {lowHue: slideLowHue, upperHue: slideUpperHue, lowSat: slideLowSat, upperSat: slideUpperSat, lowBright: slideLowBright, upperBright: slideUpperBright}; console.log(specs); props.onUpdateForeGround(specs); } const handleChangeLowHue = (event) => { setSlideLowHue(event.target.value); updateFg(); }; return( <form method="POST"> <label htmlFor="lowHue">Lower Hue: {slideLowHue}</label> <input id = "lowHue" type = "range" min = {0} max = {179} step = {1.0} defaultValue = {0} onChange={handleChangeLowHue} /> </form> ); }; export default SlideBarFg;Y en otro archivo:
import SlideBarFg from "./SlideBarFg"; import regeneratorRuntime from "regenerator-runtime"; async function updateForeGroundHandler(specs){ const response = await fetch('http://localhost:5000/d_object/capture/fg_specs/',{ method: 'POST', body: JSON.stringify(specs), headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', } }) }Y el siguiente es el archivo python:
from flask import request, jsonify @d_object_blueprint.route('/capture/fg_specs/', methods = ['GET', 'POST']) def fg_specs_request(): data = request.data print(data) return(data)También al menos en mis casos tuve que hacer lo siguiente:
from flask_cors import CORS app = Flask(__name__) CORS(app)Deberá escribir su propia función para enviar los datos a su backend y llamarla en lugar de requestSubmit() .
preventDefault() está impidiendo requestSubmit() , que luego está llamando manualmente. Eso es lo que está causando el comportamiento que estás tratando de prevenir :)
Su función deberá tener algún tipo de llamada AJAX que envíe los datos al punto final correcto en su API de matraz y luego maneje la respuesta como lo necesite.