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

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

新規登録して質問してみよう
ただいま回答率
85.42%
JSONP

JSONP(JSON with padding)は、JSONを使用した関数呼び出しのための仕組み。クロスドメインでのデータの受け渡しが可能です。JavaScriptからクロスドメインで容易にデータを扱うことができます。

React.js

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

Q&A

解決済

2回答

700閲覧

React.jsにてバックエンドの状態(ture, false)をトグルに反映させたい。

Tomato_leaf

総合スコア173

JSONP

JSONP(JSON with padding)は、JSONを使用した関数呼び出しのための仕組み。クロスドメインでのデータの受け渡しが可能です。JavaScriptからクロスドメインで容易にデータを扱うことができます。

React.js

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

0グッド

1クリップ

投稿2023/01/04 06:40

前提

家電をコントロールできるWebアプリのフロントエンド側をReact.jsを使用し作成しています。

実現したいこと

バックエンドの状態をトグルに反映させたい。

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

機器(sensor)にはarmedというフィールドがあるのですが
そこがtrueの時はトグルがON、falseの時はOFFにしたいと考えていますが
反映がされません。。。

イメージ説明

該当のソースコード

Json

1{ 2 "attributes": { 3 "sensor": [ 4 { 5 "object_id": "0x0082_38", 6 "armed": true, 7 }, 8 ], 9 } 10}

ToggleSwitchButton.js

1import React from 'react' 2import styled from 'styled-components' 3 4const StyledToggleSwitchButton = styled.div` 5 & input { 6 display: none; 7 &:checked + label { 8 background-color: #7CFC00; 9 &::before { 10 left: 2em; 11 } 12 } 13 } 14 15 & label { 16 background-color: #062863; 17 border-radius: 2em; 18 border: 2px solid var(--text-color); 19 display: flex; 20 align-items: center; 21 justify-content: space-around; 22 height: 2em; 23 position: relative; 24 transition: .5s; 25 width: 3.75em; 26 27 &::before { 28 background: #fff; 29 border-radius: 100%; 30 content: ''; 31 display: inline-block; 32 height: 1.5em; 33 position: absolute; 34 left: 0.25em; 35 transition: .5s ease-out; 36 width: 1.5em; 37 z-index: 2; 38 } 39 } 40 41 @media(max-width:751px){ 42 & input { 43 display: none; 44 &:checked + label { 45 background-color: #7CFC00; 46 &::before { 47 left: 1em; 48 } 49 } 50 } 51 52 & label { 53 background-color: #062863; 54 border-radius: 1em; 55 border: 1px solid var(--text-color); 56 display: flex; 57 align-items: center; 58 justify-content: space-around; 59 height: 1em; 60 position: relative; 61 transition: .5s; 62 width: 1.75em; 63 64 &::before { 65 background: #fff; 66 border-radius: 100%; 67 content: ''; 68 display: inline-block; 69 height: 1em; 70 position: absolute; 71 left: 0.2em; 72 transition: .5s ease-out; 73 width: 1em; 74 z-index: 2; 75 } 76 } 77 78 } 79 80 81 @media(max-width:282px){ 82 @media(max-width:751px){ 83 & input { 84 display: none; 85 &:checked + label { 86 background-color: #7CFC00; 87 &::before { 88 left: 1em; 89 } 90 } 91 } 92 93 & label { 94 background-color: #062863; 95 border-radius: 1em; 96 border: 1px solid var(--text-color); 97 display: flex; 98 align-items: center; 99 justify-content: space-around; 100 height: 1em; 101 position: relative; 102 transition: .5s; 103 width: 1.75em; 104 105 &::before { 106 background: #fff; 107 border-radius: 100%; 108 content: ''; 109 display: inline-block; 110 height: 1em; 111 position: absolute; 112 left: 0.2em; 113 transition: .5s ease-out; 114 width: 1em; 115 z-index: 2; 116 } 117 } 118 119 } 120 121` 122 123const ToggleSwitchButton = ({ className, handleChange }) => ( 124 <StyledToggleSwitchButton className={className}> 125 <input id="btn-mode" type="checkbox" onChange={handleChange} /> 126 <label htmlFor="btn-mode"> 127 </label> 128 </StyledToggleSwitchButton> 129) 130 131export default ToggleSwitchButton;

SensorDetail.js

1import ToggleSwitchButton from '../../ToggleSwitchButton' 2 3const SensorDetail = (props) => { 4 5 const { object_id } = useParams(); 6 7 const [sensor, setSensor] = useState([]); 8 9 const [isToggle, setIsToggle] = useState(); 10 const [toggle_status, setToggleStatus] = useState(); 11 12 const handleChange = useCallback(() => { 13 // Executed when the toggle switch is turned on or off 14 if(isToggle) { 15 setIsToggle(false); 16 alert('switch off!'); 17 setDisarm(); 18 } 19 else{ 20 setIsToggle(true); 21 alert('switch on!'); 22 setArm(); 23 } 24 }, [isToggle]); 25 26 27 const getDevices = async(data) => { 28 await axios.get('xxx.com', 29 { 30 headers: { 31 'Content-Type': 'application/json', 32 'Authorization': `Bearer ${cookies.get('accesstoken')}` 33 }, 34 }) 35 .then(result => { 36 setSensor(result.data.attributes.sensor); 37 // get the arm status 38 setToggleStatus(result.data.attributes.sensor.filter(c => c.object_id === object_id).map((item,i) => item.armed)[0]); 39 // toggle_status contains the backend toggle status (armed is true, disarmed is false). 40 // If toggle status is true here, setIsToggle(true) to true isToggle, 41 // If the toggle status is false here, setIsToggle(false) sets isToggle to false. 42 // (setIsToggle(true) toggles ON, setIsToggle(false) toggles OFF) 43 if (result.data.attributes.sensor.filter(c => c.object_id === object_id).map((item,i) => item.armed)[0] == true) { 44 setIsToggle(true); 45 } 46 else { 47 setIsToggle(false); 48 }; 49 50 }) 51 .catch(err => { 52 console.log(err); 53 }); 54 } 55 56 useEffect(() => { 57 getDevices(); 58 },[]); 59 60 return ( 61 <div> 62 <p>Device Status</p> 63 <div> 64 {item.armed == true ? 65 <p>Armed</p> 66 : 67 <p>Disarmed</p> 68 } 69 <ToggleSwitchButton handleChange={handleChange} /> 70 71 </div> 72 ); 73} 74export default SensorDetail;

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

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

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

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

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

guest

回答2

0

自己解決

const ToggleSwitchButton = ({ className, checked, handleChange }) => ( <StyledToggleSwitchButton className={className}> <input id="btn-mode" type="checkbox" onChange={handleChange} checked={checked}/> <label htmlFor="btn-mode"> </label> </StyledToggleSwitchButton> )

そして

const [isToggle, setIsToggle] = useState(false); ... return ( <div> <p>Device Status</p> <div> {item.armed == true ? <p>Armed</p> : <p>Disarmed</p> } <ToggleSwitchButton handleChange={handleChange} checked={isToggle}/> </div> );

で解決しました!

投稿2023/01/04 08:21

Tomato_leaf

総合スコア173

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

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

0

お手軽にはフロントから定期的にバックエンドAPIにリクエストする方法があるようです

リアルタイムなWebアプリを実現する4の方法

https://future-hearts.com/2019/06/15/realtime-web-app/

投稿2023/01/04 07:48

yuma.inaura

総合スコア1453

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

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

Tomato_leaf

2023/01/04 08:22

ありがとうございます。リンクとは関係ございませんが、解決しました。コメントありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.42%

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

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

質問する

関連した質問