複数の関数をonChange、もしくは別の方法で実行する方法

前提

現在、家の電気機器をWebでコントールできるシステムを作っています。
Backendはできていて、
スライダーによってライトの明るさを調整する機能を実装しています。

実現したいこと

スライダーによってライトの明るさ(数値)を調整する機能を実装したい
イメージ説明

発生している問題・エラーメッセージ

下記のコードでスライダーを動かすとbrightness_value変数に0から100までの数字が代入されるところまでは
実装できました。
問題はスライダーを動かすと同時にlightOn関数を発火させ、Backendにその数値を反映させたいのですが
どのようにすればいいか分からずにおります。
(onChangeは既に使っているので使えない?)

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

該当のソースコード

React.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;

試したこと

ここに問題に対して試したことを記載してください。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

コメントを投稿

0 コメント