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;

行動規範の内容に同意します

回答2件

自己解決

const LightDetailCondo = () => {
  const [hex_value, setHexValue] = React.useState("#fffff");
  
  const hexToRGB = () => {
     const value = parseInt( hex_value.slice(1),16);
     let r = value >> 16 & 0xFF;
     let g = value >> 8 & 0xFF;
     let b = value & 0xFF;
     return `[${r}, ${g}, ${b}]`;
  }

  const handleSliderChange2 = (e) => {
    lightOn(e.target.value)
    setHexValue(e.target.value)
    console.log(e.target.value)
  }

  console.log(hexToRGB())


  const lightOn = async() => {
    console.log("Body sent to server", {
    rgb_color: hexToRGB(),
  })
    await axios.post('xxx.com',
      {
        rgb_color: hexToRGB(),
      },
      {
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${cookies.get('accesstoken')}`
        },
      })
      .then(result => {
        console.log('Color Changed!');
      })
      .catch(err => {
        console.log('Missed Color Changed!');
      });
  }

  return (
    <div> color picker: 
        <input type="color" name="favorite_color" onChange={handleSliderChange2} />
    </div>
    );
}

でうまくいきました！

投稿2023/01/24 09:37

Tomato_leaf

総合スコア173