如何让React中的onChange事件仅在值最终变更时触发一次

React 中所有表单元素的onChange事件默认都会在值发生变化时立即触发，和原生input事件行为一致，没有专门的prop可以直接切换为原生change事件的触发逻辑，你可以用以下两种方法实现需求：

方案1：配合状态实现（推荐，适配需要实时展示滑块值的场景） #

如果你的页面需要同步显示当前滑块的拖动值，这种方案更易用，仅在拖拽/调整结束后触发最终逻辑：

import { useState } from 'react';

const App = () => {
  // 存储滑块实时值
  const [currentValue, setCurrentValue] = useState(0);

  // 滑块调整完成后触发的逻辑
  const handleFinalConfirm = () => {
    console.log(currentValue);
  }

  return (
    <input
      type="range"
      min={0}
      max={100}
      value={currentValue}
      // 实时更新状态，方便页面展示
      onChange={(e) => setCurrentValue(e.target.valueAsNumber)}
      // 适配鼠标操作
      onMouseUp={handleFinalConfirm}
      // 适配键盘上下左右键调整
      onKeyUp={handleFinalConfirm}
      // 适配移动端触屏滑动
      onTouchEnd={handleFinalConfirm}
    />
  )
}

方案2：绑定原生change事件（轻量化，完全对齐原生行为） #

如果你不需要实时获取滑块值，直接通过ref绑定原生的change事件即可，行为和原生HTML示例完全一致：

import { useRef, useEffect } from 'react';

const App = () => {
  const rangeRef = useRef(null);

  useEffect(() => {
    const rangeEl = rangeRef.current;
    const handleNativeChange = (e) => {
      console.log(e.target.valueAsNumber);
    };
    // 绑定原生change事件
    rangeEl.addEventListener('change', handleNativeChange);
    // 组件卸载时移除事件绑定，避免内存泄漏
    return () => rangeEl.removeEventListener('change', handleNativeChange);
  }, []);

  return <input type="range" ref={rangeRef} />
}

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