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

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

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

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

Q&A

解決済

1回答

463閲覧

React.jsにてラジオボタンをクリックした時にバックエンドにリクエストを送りたい

Tomato_leaf

総合スコア173

React.js

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

0グッド

0クリップ

投稿2023/01/19 07:41

編集2023/01/20 18:33

前提

React.jsにて
家電にそれぞれ割り当てられている部屋の名前を
バックエンドから拾ってきて、表示しており
その家電が属する部屋をラジオボタンにて初期値としてチェックしています。

実現したいこと

違う箇所のラジオボタンをクリックした時に
handleChangeにてバックエンドにリクエストを送りたい

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

違う箇所のラジオボタンをクリックした時にリクエストが送られません。
コンソールにも何も表示されません。

イメージ説明

該当のソースコード

React.js

1import Dropdown from 'react-bootstrap/Dropdown'; 2 3const cookies = new Cookies(); 4 5const DropDownForRoomChangeButton = (item) => { 6 7 const [devices, setDevices] = useState([]); 8 9 const handleChange = e => { 10 setVal(e.target.name); 11 setDeviceRoomName(e.target.name); 12 } 13 14 const setDeviceRoomName = async(data) => { 15 console.log("Body sent to server", { 16 attributes: 17 [ 18 { 19 entity_id : item.item.entity_id, 20 room_name: data 21 } 22 ] 23 }) 24 await axios.post('xxx.com', 25 { 26 attributes: 27 [ 28 { 29 entity_id : item.item.entity_id, 30 room_name: data 31 } 32 ] 33 }, 34 { 35 headers: { 36 'Content-Type': 'application/json', 37 'Authorization': `Bearer ${cookies.get('accesstoken')}` 38 }, 39 }) 40 .then(result => { 41 console.log(result.data); 42 console.log(entity_id); 43 console.log('Set Device Room Name!'); 44 getDevices(); 45 }) 46 .catch(err => { 47 console.log(err); 48 console.log(entity_id); 49 console.log('Missed Set Device Room Name!'); 50 }); 51 } 52 53 const getDevices = async(data) => { 54 await axios.get('xxx.com', 55 { 56 headers: { 57 'Content-Type': 'application/json', 58 'Authorization': `Bearer ${cookies.get('accesstoken')}` 59 }, 60 }) 61 .then(result => { 62 console.log(result.data) 63 setDevices(result.data.attributes); 64 }) 65 .catch(err => { 66 console.log(err); 67 }); 68 } 69 70 71 const keys = [ 72 "camera", 73 "climate", 74 "cover", 75 "light", 76 "lock", 77 "sensor", 78 "switch", 79 ]; 80 81 const entities = keys 82 .map((key) => (devices[key] || []).map((e) => ({ ...e, key }))) 83 .flat(); 84 85 const roomNames = [...new Set(entities.map((entity) => entity.room_name))]; 86 87 88 const [val, setVal] = useState(); 89 console.log(val) 90 const HomeHandleChange = e => setVal(e.target.value); 91 92 const CustomToggle = React.forwardRef(({ children, onClick }, ref) => ( 93 <a 94 href="" 95 ref={ref} 96 onClick={(e) => { 97 e.preventDefault(); 98 onClick(e); 99 }} 100 > 101 {children} 102 <button className="btn btn-primary button_table_rightside">Unassigned</button> 103 </a> 104 )); 105 106useEffect(() => { 107 getDevices(); 108 setVal(item.item.room_nam) 109},[]); 110 111console.log(roomNames) 112console.log(item) 113console.log(item.item.room_name) 114 115 return ( 116 <> 117 118 119 <Dropdown className="room_change_dropdown_top"> 120 121 <Dropdown.Toggle as={CustomToggle} id="dropdown-custom-components" /> 122 123 <Dropdown.Menu className="room_change_dropdown"> 124 <Dropdown.Item className="room_change_dropdown_item"> 125 {roomNames.map((room_names, i) => ( 126 <div className="flex_radio"> 127 <input 128 className="room_change_radio" 129 type="radio" 130 value={room_names} 131 name={item.item.room_name} 132 onChange={handleChange} 133 checked={val === item.item.room_name} 134 /> 135 <p className="drop_down_p">{room_names}</p> 136 </div> 137 ))} 138 </Dropdown.Item> 139 </Dropdown.Menu> 140 </Dropdown> 141 142 143 144 145 </> 146 ); 147} 148export default DropDownForRoomChangeButton;

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

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

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

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

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

guest

回答1

0

自己解決

<input className="room_change_radio" type="radio" value={room_names} name={room_names} onChange={handleChange} checked={val === room_names} />

でうまくいきました。

投稿2023/01/20 09:33

Tomato_leaf

総合スコア173

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問