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

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

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

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

Q&A

解決済

2回答

1040閲覧

React.jsでモーダルで入力したテキストをBackendへ送りたい。

Tomato_leaf

総合スコア173

React.js

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

0グッド

0クリップ

投稿2023/01/12 10:31

前提

家電をコントロールできるWebアプリのフロントエンド側をReact.jsを使用し作成しています。

実現したいこと

モーダルで入力したテキストをBackendへ送りたい。
その時、画面遷移をおこらないようにしたい。

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

モーダルでテキストを押し、Submitボタンを押すと、ページ遷移が起こり、コンソールで何が送られたのか確認できない。
詳しくは下記の動画をご覧ください。

https://youtu.be/_ppCNBTBIvc

該当のソースコード

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;

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

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

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

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

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

guest

回答2

0

以下の2点の修正するとどうでしょう?

(1) formタグを削除

diff

1- <form> 2 <input type="text" onChange={addRoom} value={room_name}/> 3 <div className="done_button"> 4 <button className='btn btn-block btn-primary' type="submit" onClick={clickSubmit}> 5 OK 6 </button> 7 </div> 8- </form>

formタグを削除したことでレイアウトにズレが生じた場合は適宜調整します。

(2) OKボタンのprop type"button"に修正

diff

1- <button className='btn btn-block btn-primary' type="submit" onClick={clickSubmit}> 2+ <button className='btn btn-block btn-primary' type="button" onClick={clickSubmit}>

投稿2023/01/12 12:54

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

0

ベストアンサー

HTML 的なformの挙動ではなくReact流で書いてはいかがでしょう

tsx

1 2const FormSubmit = () => { 3 4 const handleOnclick = (e: any) => { 5 e.preventDefault(); 6 console.log(e.target.textContent) 7 } 8 9 return ( 10 <> 11 <div> 12 <form onSubmit={handleOnclick}> 13 <button >Click me</button> 14 </form> 15 </div> 16 </> 17 ); 18} 19export default FormSubmit;

参考

ユーザがフォームを送信した際に新しいページに移動する、という、HTML フォームとしてのデフォルトの動作をします。React でこの振る舞いが必要なら、そのまま動きます。しかし大抵のケースでは、フォームの送信に応答してユーザがフォームに入力したデータにアクセスするような JavaScript 関数があった方が便利です。

https://ja.reactjs.org/docs/forms.html

投稿2023/01/12 10:54

yuma.inaura

総合スコア1451

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

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

Tomato_leaf

2023/01/12 11:23

e.preventDefault();を使うと繊維がなくなりました。ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.53%

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

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

質問する

関連した質問