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

Question

前提

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

実現したいこと

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

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

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

https://youtu.be/_ppCNBTBIvc

該当のソースコード

import Modal from 'react-bootstrap/Modal';


const cookies = new Cookies();


const AddRoomModal = (props) => {

  const [room_name, setRoomName] = useState("");

  const addRoom = (e) => {
    setRoomName(e.target.value);
  }

  const clickSubmit = (e) => {
    AddRoom(e.target.value);
  }

  const building_state = useSelector(state => state.building_state.building_state);

  console.log(building_state);

  const url_forgetroomname = {
    "condo": "aaa.com",
    "office": "bbb.com",
    "house": "ccc.com"
   }[building_state]

  const AddRoom = async(data) => {
    console.log("Body sent to server", {
    home_rooms: room_name, 
  })
    await axios.post(url_forgetroomname,
      {
        home_rooms: room_name, 
      },
      {
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${cookies.get('accesstoken')}`
        },
      })
      .then(result => {
        alert('Succeded add room!');
        console.log('Succeded add room!');
      })
      .catch(err => {
        alert('Missed add room!');
        console.log(err);
        console.log('Missed add room!');
      });
  }

  const getRoomName = async(data) => {
    await axios.get(url_forgetroomname,
      {
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${cookies.get('accesstoken')}`
        },
      })
      .then(result => {
        console.log(result.data)
        setRoomName(result.data.home_rooms);  
      })
      .catch(err => {
        console.log(err);
      });
  }


  return (
    <>
      <Modal show={props.show}>
      <Modal.Body className="light_modal_body" >
      <div className="light_modal_body">     
        <div className="range-container col-12">
        </div>
        <h3>Add Room</h3>
        <form>
        <input type="text" onChange={addRoom} value={room_name}/>
        <div className="done_button">
          <button className='btn btn-block btn-primary' type="submit" onClick={clickSubmit}>
          OK
          </button>
        </div>
        </form>
        <div className="done_button">
          <button onClick={props.handleHide} className='btn btn-block btn-danger'>Cancel</button>
        </div>
      </div>
      </Modal.Body>
      </Modal>
    </>
  );
}
export default AddRoomModal;

import AddRoomModal from '../AddRoomModal';

const cookies = new Cookies();

const HeaderForSettingGetRoomName = (props) => {
  const isLoggedInOn = useSelector(state => state.user.isLoggedIn);

  // modal
  const [show, setShow] = useState();

  // Show Modal
  const handleShow = () => {
    setShow(true);
  }
  // Hide modal
  const handleHide = () => {
    setShow(false);
  }



  const building_state = useSelector(state => state.building_state.building_state);

  console.log(building_state);


    return (
      <div>
        <AddRoomModal
          show={show} handleHide={handleHide}
        />
        <div className="header">
              <Link to={`/setting`} className="">        <img className="header_menu_back_leftside" src={ic_back} alt="" />
              </Link>
              <img className="header_logo" src={logo_image} />
              <img className="ic_add_white" src={ic_add_white} onClick={handleShow}/>
        </div>

      </div>
    );
  }

  export default HeaderForSettingGetRoomName;

Answer 1

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

(1) formタグを削除

-       <form>
        <input type="text" onChange={addRoom} value={room_name}/>
        <div className="done_button">
          <button className='btn btn-block btn-primary' type="submit" onClick={clickSubmit}>
          OK
          </button>
        </div>
-       </form>

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

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

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

Answer 2

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

例

const FormSubmit = () => {

  const handleOnclick = (e: any) => {
    e.preventDefault();
    console.log(e.target.textContent)
  }

  return (
    <>
      <div>
        <form onSubmit={handleOnclick}>
          <button >Click me</button>
        </form>
      </div>
    </>
  );
}
export default FormSubmit;

参考

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

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

Comments

[Tomato_leaf]

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