如何让React中range输入框的onChange仅在用户释放滑块时触发？

原代码中onChange事件会在滑块拖动过程中持续触发，导致setState频繁执行。要实现仅在用户释放滑块时更新状态，可通过以下两种方式实现：

方案1：非受控组件 + Ref（推荐） #

这种方式无需在拖动过程中同步状态，仅在释放时获取滑块最终值并更新组件状态，性能更优。

实现步骤： #

1. 在组件构造函数中创建Ref并初始化状态：

constructor(props) {
  super(props);
  this.state = { smoothing: 50 };
  this.smootherRef = React.createRef();
}

2. 修改滑块元素，使用defaultValue而非value绑定初始值，同时绑定释放类事件：

render() {
  return (
    <input
      ref={this.smootherRef}
      defaultValue={this.state.smoothing}
      type="range"
      name="smoother"
      min="0"
      max="100"
      onMouseUp={() => this.updateSmoothness()}
      onTouchEnd={() => this.updateSmoothness()}
      onKeyUp={(e) => {
        // 兼容键盘操作：方向键、回车松开时触发更新
        if (['ArrowUp', 'ArrowDown', 'Enter'].includes(e.key)) {
          this.updateSmoothness();
        }
      }}
    />
  );
}

3. 编写状态更新方法，通过Ref获取滑块当前值：

updateSmoothness() {
  const currentValue = this.smootherRef.current.value;
  this.setState({ smoothing: currentValue });
}

方案2：受控组件结合临时状态（兼容实时预览场景） #

如果需要在拖动过程中实时展示滑块值，但仅在释放时更新业务状态，可使用临时状态跟踪拖动过程：

constructor(props) {
  super(props);
  this.state = { smoothing: 50, tempSmoothing: 50 };
}

render() {
  return (
    <input
      value={this.state.tempSmoothing}
      type="range"
      name="smoother"
      min="0"
      max="100"
      onChange={(e) => this.setState({ tempSmoothing: e.target.value })}
      onMouseUp={() => this.setState({ smoothing: this.state.tempSmoothing })}
      onTouchEnd={() => this.setState({ smoothing: this.state.tempSmoothing })}
    />
  );
}

注：此方案会在拖动时更新临时状态（仍会触发组件重渲染），仅业务状态smoothing在释放时更新。

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