I'm trying to make a range form where it sends the changed data to Flask backend on any change so it's seamless. Similar to how openCV trackbar works.
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;
I have also tried adding a <form onSubmit = {submitHandler}> and did the event.preventDefault() there.
No matter what I tried it still refreshed and it seems not many have had this combination of having to submit onChange and not refresh, at least from what I found.
Thanks to @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;
And in another file:
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',
}
})
}
And following is the python file:
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)
Also at least in my cases I had to do the following:
from flask_cors import CORS
app = Flask(__name__)
CORS(app)
You'll need to write your own function for sending the data to your backend, and call that instead of requestSubmit().
preventDefault() is preventing requestSubmit(), which you're then calling manually. That's whats causing the behavior you're trying to prevent :)
Your function will need to have some kind of AJAX call in it that sends the data to the correct endpoint in your flask API, and then handles the response however you need.