如何在 React.js 上運行多個函數？

Question

目前，我正在制作一個可以在 web 上控制家用電器設備的系統。 后端已准備就緒，我正在嘗試實現 function 以使用 slider 調整燈光的亮度。

當使用下面的代碼移動 slider 時，我可以設置亮度值變量被分配一個從 0 到 100 的數字。

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

問題是我想在移動 slider 的同時點亮 lightOn function 但我不知道該怎么做。 （我已經在用onChange了，不能用嗎？）

LightDetail.js

import React, { useState, useEffect, useCallback, onClick} from 'react';
import axios from 'axios';
import ic_light from "../../images/icons/ic_light.png"

const LightDetail = () => {

  const [light, setLight] = useState([]);

  const [brightness_value, setBrightnessValue] = useState();


// set light strength
  const lightOn = async(data) => {
    await axios.post('xxx.com/light/turn_on',
      {
        brightness: brightness_value
      },
      {
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${cookies.get('accesstoken')}`
        },
      })
      .then(result => {
        console.log('Turn on!');
        getDevices();
      })
      .catch(err => {
        console.log('Turn on Missed!');
      });
  }

// get light data from backend
const getDevices = async(data) => {
  await axios.get('xxx.com/device_listr',
    {
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${cookies.get('accesstoken')}`
      },
    })
    .then(result => {
      console.log(result.data)
      setLight(result.data.attributes.light);  
    })
    .catch(err => {
      console.log(err);
    });
}

useEffect(() => {
  getDevices();
    }, []);


  return (
    <div className="container">
      <div className="row mx-auto text-center">
          <>
            {light.map((item,i) => 
              <div key={i} className="col-12">
                <div className="box h-100">
                <img className="" src={ic_light} />
                <input type="range" name="speed" min="0" max="100" 
                value={brightness_value} onChange={(e) => setBrightnessValue(e.target.value)}></input><br></br>
                <Link to={`/device_list`} className='btn btn-primary col-4'>Back</Link>
                </div>
              </div>
            )}

          </>
      </div>
    </div>
  );
}
export default LightDetail;

Answer 1

您可以將 onChange 定義為自定義事件處理程序，您可以在其中執行任何操作。

示例片段：

const handleSliderChange = (e) => {
  setLightOn(e.target.value)
  setBrightnessValue(e.target.value)
}

...

<input type="range" name="speed" min="0" max="100" 
                value={brightness_value} onChange={handleSliderChange} />

Answer 2

你應該使用state來驅動視圖的視圖來做

只需添加

useEffect(() => {
  lightOn()
}, [brightness_value])