前提
家電をコントロールできるWebアプリのフロントエンド側をReact.jsを使用し作成しています。
実現したいこと
モーダルで入力したテキストをBackendへ送りたい。
その時、画面遷移をおこらないようにしたい。
発生している問題・エラーメッセージ
モーダルでテキストを押し、Submitボタンを押すと、ページ遷移が起こり、コンソールで何が送られたのか確認できない。
詳しくは下記の動画をご覧ください。
該当のソースコード
AddRoomModal.js
1 2import Modal from 'react-bootstrap/Modal'; 3 4 5const cookies = new Cookies(); 6 7 8const AddRoomModal = (props) => { 9 10 const [room_name, setRoomName] = useState(""); 11 12 const addRoom = (e) => { 13 setRoomName(e.target.value); 14 } 15 16 const clickSubmit = (e) => { 17 AddRoom(e.target.value); 18 } 19 20 const building_state = useSelector(state => state.building_state.building_state); 21 22 console.log(building_state); 23 24 const url_forgetroomname = { 25 "condo": "aaa.com", 26 "office": "bbb.com", 27 "house": "ccc.com" 28 }[building_state] 29 30 const AddRoom = async(data) => { 31 console.log("Body sent to server", { 32 home_rooms: room_name, 33 }) 34 await axios.post(url_forgetroomname, 35 { 36 home_rooms: room_name, 37 }, 38 { 39 headers: { 40 'Content-Type': 'application/json', 41 'Authorization': `Bearer ${cookies.get('accesstoken')}` 42 }, 43 }) 44 .then(result => { 45 alert('Succeded add room!'); 46 console.log('Succeded add room!'); 47 }) 48 .catch(err => { 49 alert('Missed add room!'); 50 console.log(err); 51 console.log('Missed add room!'); 52 }); 53 } 54 55 const getRoomName = async(data) => { 56 await axios.get(url_forgetroomname, 57 { 58 headers: { 59 'Content-Type': 'application/json', 60 'Authorization': `Bearer ${cookies.get('accesstoken')}` 61 }, 62 }) 63 .then(result => { 64 console.log(result.data) 65 setRoomName(result.data.home_rooms); 66 }) 67 .catch(err => { 68 console.log(err); 69 }); 70 } 71 72 73 return ( 74 <> 75 <Modal show={props.show}> 76 <Modal.Body className="light_modal_body" > 77 <div className="light_modal_body"> 78 <div className="range-container col-12"> 79 </div> 80 <h3>Add Room</h3> 81 <form> 82 <input type="text" onChange={addRoom} value={room_name}/> 83 <div className="done_button"> 84 <button className='btn btn-block btn-primary' type="submit" onClick={clickSubmit}> 85 OK 86 </button> 87 </div> 88 </form> 89 <div className="done_button"> 90 <button onClick={props.handleHide} className='btn btn-block btn-danger'>Cancel</button> 91 </div> 92 </div> 93 </Modal.Body> 94 </Modal> 95 </> 96 ); 97} 98export default AddRoomModal;
HeaderForSettingGetRoomName.js
1 2import AddRoomModal from '../AddRoomModal'; 3 4const cookies = new Cookies(); 5 6const HeaderForSettingGetRoomName = (props) => { 7 const isLoggedInOn = useSelector(state => state.user.isLoggedIn); 8 9 // modal 10 const [show, setShow] = useState(); 11 12 // Show Modal 13 const handleShow = () => { 14 setShow(true); 15 } 16 // Hide modal 17 const handleHide = () => { 18 setShow(false); 19 } 20 21 22 23 const building_state = useSelector(state => state.building_state.building_state); 24 25 console.log(building_state); 26 27 28 return ( 29 <div> 30 <AddRoomModal 31 show={show} handleHide={handleHide} 32 /> 33 <div className="header"> 34 <Link to={`/setting`} className=""> <img className="header_menu_back_leftside" src={ic_back} alt="" /> 35 </Link> 36 <img className="header_logo" src={logo_image} /> 37 <img className="ic_add_white" src={ic_add_white} onClick={handleShow}/> 38 </div> 39 40 </div> 41 ); 42 } 43 44 export default HeaderForSettingGetRoomName;
回答2件
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。