Q&A
前提
家電をコントロールできるWebアプリのフロントエンド側をReact.jsを使用し作成しています。
実現したいこと
ラジオインプットで
onChangeを使い、temp_mode_val変数にheat, cool, auto, offなどを
代入しaxiosのPostでtemp_mode_valの中身をバックエンドへ送りたい
発生している問題・エラーメッセージ
ラジオインプットで
onChangeを使い、temp_mode_val変数にheat, cool, auto, offなどを
代入しaxiosのPostでtemp_mode_valの中身を送りたいと思うのですが
中身が空の状態になってしまい送れません。。
該当のソースコード
React.js
1const DiscoverOffice = () => { 2 3 const { entity_id } = useParams(); 4 5 const SetTemperatureMode = async(data) => { 6 console.log("Body sent to server", { 7 entity_id: entity_id, 8 operation_mode: temp_mode_val 9 }) 10 await axios.post('xxx.com', 11 { 12 entity_id: entity_id, 13 operation_mode: temp_mode_val 14 }, 15 { 16 headers: { 17 'Content-Type': 'application/json', 18 'Authorization': `Bearer ${cookies.get('accesstoken')}` 19 }, 20 }) 21 .then(result => { 22 console.log(result.data); 23 console.log(entity_id); 24 console.log(val); 25 console.log('Set Mode!'); 26 setVal(val); 27 // getDevices(); 28 }) 29 .catch(err => { 30 console.log(err); 31 console.log(entity_id); 32 console.log('Missed set Mode!'); 33 }); 34 } 35 36 37 const [temp_mode_val, setTemperatureMode2] = useState('off'); 38 39 const HeatHandleChange = (e) => { 40 setTemperatureMode2(e.target.value); 41 SetTemperatureMode(e.target.value); 42 } 43 44return ( 45 46 47 <div className="ic_schedule_label flex"> 48 <input 49 className="heat_mode_radio" 50 type="radio" 51 value="heat" 52 onChange={HeatHandleChange} 53 checked={temp_mode_val === 'heat'} 54 /> 55 <p className="radio_text">Heat</p> 56 </div> 57 <div className="ic_schedule_label flex"> 58 <input 59 className="heat_mode_radio" 60 type="radio" 61 value="cool" 62 onChange={() => HeatHandleChange('cool')} 63 checked={temp_mode_val === 'cool'} 64 /> 65 <p className="radio_text">Cool</p> 66 </div> 67 <div className="ic_schedule_label flex"> 68 <input 69 className="heat_mode_radio" 70 type="radio" 71 value="auto" 72 onChange={() => HeatHandleChange('auto')} 73 checked={temp_mode_val === 'auto'} 74 /> 75 <p className="radio_text">Auto</p> 76 </div> 77 <div className="ic_schedule_label flex"> 78 <input 79 className="heat_mode_radio" 80 type="radio" 81 value="off" 82 onChange={() => HeatHandleChange('off')} 83 checked={temp_mode_val === 'off'} 84 /> 85 <p className="radio_text">Off</p> 86 </div> 87 88 89 ); 90} 91export default DiscoverOffice;
回答2件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。