質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.44%
React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

2回答

1168閲覧

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

Tomato_leaf

総合スコア173

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2023/01/24 07:56

実現したいこと

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;

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

自己解決

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

#944242(例)ようにちゃんと値は渡っているのですが

数値に変換するのに際しては、#が余計なのではないでしょうか?

投稿2023/01/24 08:09

編集2023/01/24 08:09
maisumakun

総合スコア145366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Tomato_leaf

2023/01/24 09:37

ありがとうございます。回答が見つかりました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.44%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問