我正在嘗試制作一個范圍表單，它在任何更改時將更改的資料發送到 Flask 后端，因此它是無縫的。類似于 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;
我也試過添加 a<form onSubmit = {submitHandler}>并在event.preventDefault()那里做了。
無論我嘗試什么，它仍然會重繪 ，而且似乎沒有多少人有這種必須提交 onChange 而不是重繪 的組合，至少從我發現的情況來看。
uj5u.com熱心網友回復：
感謝@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;
在另一個檔案中：
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',
}
})
}
以下是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)
至少在我的情況下，我必須執行以下操作：
from flask_cors import CORS
app = Flask(__name__)
CORS(app)
uj5u.com熱心網友回復：
您需要撰寫自己的函式來將資料發送到后端，并呼叫它而不是requestSubmit().
preventDefault()正在阻止requestSubmit()，然后您手動呼叫。這就是導致您試圖阻止的行為的原因:)
您的函式需要在其中進行某種 AJAX 呼叫，將資料發送到您的 Flask API 中的正確端點，然后根據需要處理回應。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/355564.html
標籤：javascript 反应