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

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

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

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

Q&A

解決済

React.jsでのラジオボタンへのPropsの渡し方

Tomato_leaf
Tomato_leaf

総合スコア170

React.js

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

1回答

0グッド

0クリップ

190閲覧

投稿2023/01/17 11:09

前提

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

実現したいこと

家電にそれぞれ割り当てられている部屋の名前と一致するものをラジオボタンにチェック(反映)させたい。

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

現在は写真のようにどこもチェックされていません。
DropDownForRoomChangeButton.jsにある
console.log(item.item.room_name)にはちゃんと中身が入っているのが確認できるので
なぜチェックがされていないのか不思議です。

イメージ説明

該当のソースコード

DiscoverCondoRoom.js

1const DiscoverCondoRoom = () => { 2 const [devices, setDevices] = useState([]); 3 4 const getDevices = async(data) => { 5 await axios.get('xxx.com', 6 { 7 headers: { 8 'Content-Type': 'application/json', 9 'Authorization': `Bearer ${cookies.get('accesstoken')}` 10 }, 11 }) 12 .then(result => { 13 console.log(result.data) 14 setDevices(result.data.attributes); 15 }) 16 .catch(err => { 17 console.log(err); 18 }); 19 } 20 21 useEffect(() => { 22 getDevices(); 23 },[]); 24 25 26 const keys = [ 27 "camera", 28 "climate", 29 "cover", 30 "light", 31 "lock", 32 "sensor", 33 "switch", 34 ]; 35 36 const entities = keys 37 .map((key) => (devices[key] || []).map((e) => ({ ...e, key }))) 38 .flat(); 39 40 41 return ( 42 <> 43 <div className="row mx-auto text-center"> 44 {entities.map((entity, i) => ( 45 <div className=""> 46 <DropDownForRoomChangeBotton item={entity} /> 47 </div> 48 </div> 49 50 } 51 </> 52 ); 53} 54 55export default DiscoverCondoRoom; 56

DropDownForRoomChangeButton.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 getDevices = async(data) => { 10 await axios.get('xxx.com', 11 { 12 headers: { 13 'Content-Type': 'application/json', 14 'Authorization': `Bearer ${cookies.get('accesstoken')}` 15 }, 16 }) 17 .then(result => { 18 console.log(result.data) 19 setDevices(result.data.attributes); 20 }) 21 .catch(err => { 22 console.log(err); 23 }); 24 } 25 26 27 const keys = [ 28 "camera", 29 "climate", 30 "cover", 31 "light", 32 "lock", 33 "sensor", 34 "switch", 35 ]; 36 37 const entities = keys 38 .map((key) => (devices[key] || []).map((e) => ({ ...e, key }))) 39 .flat(); 40 41 const roomNames = [...new Set(entities.map((entity) => entity.room_name))]; 42 43 44 const [val, setVal] = useState(); 45 console.log(val) 46 const HomeHandleChange = e => setVal(e.target.value); 47 48 const CustomToggle = React.forwardRef(({ children, onClick }, ref) => ( 49 <a 50 href="" 51 ref={ref} 52 onClick={(e) => { 53 e.preventDefault(); 54 onClick(e); 55 }} 56 > 57 {children} 58 <button className="btn btn-primary button_table_rightside">Unassigned</button> 59 </a> 60 )); 61 62useEffect(() => { 63 getDevices(); 64 setVal(item.item.room_nam) 65},[]); 66 67console.log(roomNames) 68console.log(item) 69console.log(item.item.room_name) 70 71 return ( 72 <> 73 74 75 <Dropdown className="room_change_dropdown_top"> 76 77 <Dropdown.Toggle as={CustomToggle} id="dropdown-custom-components" /> 78 79 <Dropdown.Menu className="room_change_dropdown"> 80 <Dropdown.Item className="room_change_dropdown_item"> 81 {roomNames.map((room_names, i) => ( 82 <div className="flex_radio"> 83 <input 84 className="room_change_radio" 85 type="radio" 86 value={room_names} 87 onChange={HomeHandleChange} 88 checked={val === item.item.room_name} 89 /> 90 <p className="drop_down_p">{room_names}</p> 91 </div> 92 ))} 93 </Dropdown.Item> 94 </Dropdown.Menu> 95 </Dropdown> 96 97 98 99 100 </> 101 ); 102} 103export default DropDownForRoomChangeButton; 104

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

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

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

下記のような質問は推奨されていません。

  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

yuma.inaura

2023/01/17 12:48

room_nam は typo じゃないですか?

回答1

0

自己解決

const homeHandleChange = e => setVal(e.target.name); <input ... name={item.item.room_name} onChange={homeHandleChange} checked={val === item.item.room_name} />
const [val, setVal] = useState(item.item.room_name);

で解決しました!

投稿2023/01/17 19:42

Tomato_leaf

総合スコア170

下記のような回答は推奨されていません。

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

同じタグがついた質問を見る

React.js

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