How to run multiple functions at React.js?-CodePudding

Currently, I'm making a system that can control home electrical equipment on the web. Backend is ready, I'm trying to implement a function to adjust the brightness of the light with a slider.

I can set brightness_value variable is assigned a number from 0 to 100 when the slider is moved with the code below.

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

The problem is that I want to fire the lightOn function at the same time as I move the slider but I don't know what to do. (I'm already using onChange, so can't I use it?)

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;

CodePudding user response：

You can define onChange as a custom event handler where you can do whatever.

Example snippet:

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} />

CodePudding user response：

You should use the state to drive the view of the view to do

Just add

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