React.js中滑块onChange事件如何同时触发多个函数？

核心方案：复用onChange事件，两种实现方式 #

方式一：在onChange回调中直接执行状态更新与API调用

可以直接扩展原有的onChange回调，在更新亮度状态的同时调用lightOn函数。为了避免React状态更新的异步特性导致数值延迟，建议将滑块的最新值作为参数传入lightOn：

1. 修改滑块的onChange事件：

<input 
  type="range" 
  name="speed" 
  min="0" 
  max="100" 
  value={brightness_value} 
  onChange={(e) => {
    const newBrightness = e.target.value;
    setBrightnessValue(newBrightness);
    lightOn(newBrightness); // 传入最新亮度值
  }}
/>

2. 调整lightOn函数，优先使用传入的参数：

const lightOn = async(newBrightness) => {
  await axios.post('xxx.com/light/turn_on',
    {
      brightness: newBrightness // 直接使用传入的最新值
    },
    {
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${cookies.get('accesstoken')}`
      },
    })
    .then(result => {
      console.log('亮度更新成功!');
      getDevices();
    })
    .catch(err => {
      console.log('亮度更新失败:', err);
    });
}

方式二：使用useEffect监听亮度状态变化

如果希望状态稳定后再触发API请求，可以通过useEffect监听brightness_value的变化，自动调用lightOn：

1. 添加useEffect监听：

useEffect(() => {
  // 跳过初始未定义的状态，避免无效请求
  if (brightness_value !== undefined) {
    lightOn();
  }
}, [brightness_value]); // 仅当亮度值变化时执行

2. 滑块的onChange保持原有逻辑即可：

<input 
  type="range" 
  name="speed" 
  min="0" 
  max="100" 
  value={brightness_value} 
  onChange={(e) => setBrightnessValue(e.target.value)}
/>

额外修复建议 #

原代码中存在几个小问题需要修正：

• 移除无用导入：useCallback和onClick从未使用，可从import语句中删除
• 补充缺失导入：cookies和Link组件未导入，需添加对应import（如import { Link } from 'react-router-dom'，cookie库根据项目实际使用的包导入）
• 初始化亮度状态：将const [brightness_value, setBrightnessValue] = useState();改为const [brightness_value, setBrightnessValue] = useState(0);或后端返回的初始亮度值，避免滑块初始状态异常
• 修正API地址：getDevices中的xxx.com/device_listr疑似笔误，建议改为xxx.com/device_list

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