React.jsにてonChangeを使い、ラジオインプットで選択したものをバックエンドへ送りたい

前提

家電をコントロールできる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件

自己解決

ありがとうございます。

onChange={() => HeatHandleChange('Heat')}

そして、下記でうまくいきました！

const SetTemperatureMode = async(data) => {
  console.log("Body sent to server", {
  entity_id: entity_id, 
  operation_mode: data
})
  await axios.post('xxx.com',
    {
      entity_id: entity_id, 
      operation_mode: data
    },
    {
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${cookies.get('accesstoken')}`
      },
    })
    .then(result => {
      console.log(result.data);
      console.log(entity_id);
      // console.log(val);
      console.log('Set Mode!');
      setTemperatureMode2(result.data.attributes.climate.filter(c => c.entity_id === entity_id).map((item,i) =>  item.operation_mode
      )[0]);
      // setVal(val);
      getDevices();
    })
    .catch(err => {
      console.log(err);
      console.log(entity_id);
      console.log('Missed set Mode!');
      alert('Unable to set Mode!');
      getDevices();
    });
}

投稿2023/01/10 10:58

Tomato_leaf

総合スコア173

動作例です

tsx
1import axios from "axios";
2import { useState } from 'react'
3
4const RadioChangePost = () => {
5  const [val, setVal] = useState('');
6  const requestURL = "https://httpbin.org/post";
7  const [gotResponse, setResponse] = useState({ "form": { item: "" }});
8
9  const HeatHandleChange = (data: any) => {
10    setVal(data.target.value);
11    axios.post(requestURL, new URLSearchParams({ item: data.target.value })).then((response) => {
12      setResponse(response.data);
13    });
14  }
15
16  return (
17    <>
18      <div>
19        <input
20          type="radio"
21          value="heat"
22          onChange={HeatHandleChange}
23          checked={val === 'heat'}
24        />
25        Heat
26      </div>
27      <div>
28        <input
29          type="radio"
30          value="cool"
31          onChange={HeatHandleChange}
32          checked={val === 'cool'}
33        />
34        Cool
35      </div>
36      <div>{gotResponse['form']["item"]}</div>
37    </>
38  );
39}
40export default RadioChangePost;