React onChange触发表单提交时调用event.preventDefault()无法阻止页面刷新

问题根因 #

你调用原生form.requestSubmit()触发的是浏览器默认的表单提交流程，该行为默认会重载页面，你在onChange回调里调用event.preventDefault()只能阻止input change事件的默认行为，无法阻止后续表单提交触发的页面重载。

推荐实现方案（无刷新异步提交） #

直接在滑块值变化时通过fetch发送POST请求到Flask后端，不需要依赖原生表单提交逻辑，更符合无感知交互的需求：

import { useState } from "react";

const SlideBarFg = (props) => {
  const [slideLowHue, setSlideLowHue] = useState(0);

  const handleChangeLowHue = async (event) => {
    const newValue = event.target.value;
    setSlideLowHue(newValue);
    // 直接发送异步请求到Flask后端
    try {
      await fetch('替换为你的Flask接口地址', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ lowHue: newValue })
      });
      // 如需处理后端返回结果可在此处补充逻辑
    } catch (err) {
      // 错误处理逻辑
      console.error('参数提交失败:', err);
    }
  };

  return(
    <div>
      <label htmlFor="lowHue">Lower Hue: {slideLowHue}</label>
      <input
        id="lowHue"
        type="range"
        min={0}
        max={179}
        step={1.0}
        defaultValue={0}
        onChange={handleChangeLowHue}
      />
    </div>
  );
};

export default SlideBarFg;

需保留表单逻辑的兼容方案 #

如果你一定要保留form标签结构，需要正确绑定onSubmit回调阻止默认提交行为：

import { useState } from "react";

const SlideBarFg = (props) => {
  const [slideLowHue, setSlideLowHue] = useState(0);

  const handleChangeLowHue = (event) => {
    setSlideLowHue(event.target.value);
    // 触发自定义submit事件而非原生requestSubmit
    event.target.form.dispatchEvent(new Event('submit'));
  };

  const submitHandler = async (event) => {
    // 必须在submit回调内阻止默认重载行为
    event.preventDefault();
    try {
      await fetch('替换为你的Flask接口地址', {
        method: 'POST',
        body: new FormData(event.target)
      });
    } catch (err) {
      console.error('参数提交失败:', err);
    }
  };

  return(
    <form method="POST" onSubmit={submitHandler}>
      <label htmlFor="lowHue">Lower Hue: {slideLowHue}</label>
      <input
        id="lowHue"
        name="lowHue"
        type="range"
        min={0}
        max={179}
        step={1.0}
        defaultValue={0}
        onChange={handleChangeLowHue}
      />
    </form>
  );
};

export default SlideBarFg;

Flask端接收示例 #

对应第一种JSON传参方案的后端处理逻辑：

from flask import Flask, request, jsonify

app = Flask(__name__)

@app.route('/替换为你的接口路径', methods=['POST'])
def update_low_hue():
    data = request.get_json()
    low_hue = data.get('lowHue')
    # 补充你的业务处理逻辑
    return jsonify({"status": "success", "lowHue": low_hue})

内容的提问来源于stack exchange，提问作者Vlad Crehul