[React]Form Tagの使用中に発生した問題

11560 ワード
error React テキストリンク

Form Tag


formラベルは、ユーザーの意見や情報を理解するための大きなフレームワークを作成するために使用されるためです.formタグは、入力したデータを一度にサーバに転送する役割を果たします.
一度ログインページを作ったことがあるなら、formラベルを知らない人はいないと思います.
<form method="GET"></form> //URL에 parameter를 보여줘서 보안성이 없다
<form method="POST"></form>// URL에 parameter를 보여주지 않아서 보안성이 있다
これが一番基礎だと思います.ただし,全形式タグでサーバにメッセージを送信するのではなく,login rest apiでFormDataを用いてデータを渡す.
    const login =  async () => {
        
        // 아이디 비밀번호 입력하지 않았을 경우 띄우는 모달
        if(userInfo.id === '' || userInfo.pw === '' ){
            DangerAlert("아이디와 비밀번호 모두 입력해주세요.")
            return;
        }
        const formData = new FormData();
        formData.append('id', userInfo.id);
        formData.append('password',userInfo.pw);

        try{
            await httpPost("login", formData).then(
                (res) => {
                    if( res.data.RETURN[0].RESULT === "SUCCESS"){

                        Cookies.set('token', res.data.RETURN[0].TOKEN, { path: '/', expires: 1});
                        Cookies.set('name', res.data.RETURN[0].NAME, { path: '/', expires: 1});
                        Cookies.set('user_id', res.data.RETURN[0].USER_ID, { path: '/', expires: 1});             
                        Cookies.set('perm', res.data.RETURN[0].PERM, { path: '/', expires: 1});
                        history.push("/main");
                }else{
                    DangerAlert("잘못된 아이디 이거나, 비밀번호가 일치하지 않습니다.")
                }
                });
        
        }catch(error){
   console.log(error);

    }
    }
このようにFormDataを用いて情報を送信する.あとはformタグのonSubmitイベントを使いたいです.
<form onSubmit={handleSubmit}>
このタグを使用すると、id、passwordがパラメータ値としてurlに渡され、エラーが発生します...😭😭 もちろんmethod=「post」も入っていますが、結果は以下の通りです.

解決策は簡単すぎる😑 そうです.
 const handleSubmit = (e) => {
        e.preventDefault();
 }

<form onSubmit={handleSubmit}>
e.preventDefault()を使用してフォームタグの純粋な機能を阻止すると、フォームタグはサーバにデータを転送する役割ではなくonSubmit機能のみを持つやつになります!

POST方式でAPIをうまくロード!🤗🙂🤗
[基礎統計学]3.確率変数と確率分布
フルログLinux TinaコンパイルdemoOmxVdecエラー