React.jsにてinput type="color"で HEX形式のカラーをRGBカラーに変換してPOSTリクエストしたい

実現したいこと

input type="color"で
HEX形式のカラーをRGBカラーに変換してPOSTリクエストしたいと考えています。

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

hexToRGB()の中身が常に
[0, 0, 0]
で、色の変化ができません。
下記コードの
console.log(e.target.value)
の部分はカラーピッカーを動かした時に
#944242(例)ようにちゃんと値は渡っているのですが
原因がわかりません。。

該当のソースコード

React.js

1const LightDetailCondo = () => { 2 3 const [hex_value, setHexValue] = useState("#fffff"); 4 5 const hexToRGB = (hex_value) => { 6 hex_value = '0x' + hex_value 7 let r = hex_value >> 16 & 0xFF 8 let g = hex_value >> 8 & 0xFF 9 let b = hex_value & 0xFF 10 return `[${r}, ${g}, ${b}]` 11 } 12 13 const handleSliderChange2 = (e) => { 14 lightOn(e.target.value) 15 setHexValue(e.target.value) 16 console.log(e.target.value) 17 18 } 19 20 console.log(hexToRGB()) 21 22 23 const lightOn = async() => { 24 console.log("Body sent to server", { 25 rgb_color: hexToRGB(), 26 }) 27 await axios.post('xxx.com', 28 { 29 rgb_color: hexToRGB(), 30 }, 31 { 32 headers: { 33 'Content-Type': 'application/json', 34 'Authorization': `Bearer ${cookies.get('accesstoken')}` 35 }, 36 }) 37 .then(result => { 38 console.log('Color Changed!'); 39 }) 40 .catch(err => { 41 console.log('Missed Color Changed!'); 42 }); 43 } 44 45 46 47 useEffect(() => { 48 49 }, []); 50 51 52 53 return ( 54 <div> 55 <input type="color" name="favorite_color" onChange={handleSliderChange2}> 56 </div> 57 ); 58} 59export default LightDetailCondo;

コメントを投稿

0 コメント