編集履歴

質問編集履歴

質問のついき

2021/04/28 14:00

投稿

スコア106

test CHANGED Viewed

	@@ -1 +1 @@
1	- ~~サーバー~~に~~データを送りた~~い！
1	+ 文字入力する度にonClickが働いてしまう

test CHANGED Viewed

@@ -1,11 +1,3 @@
-##したいこと
-ログイン処理を実装したいです。
-ログイン処理をするためにユーザーからEmailとパスワードを入力してもらってサーバーに送りたいのですがやり方がわかりません。
 ##開発環境
 サーバーサイド: Rails,
@@ -14,286 +6,104 @@
-##試したこと
+##したいこと
+ボタンが押されたときに、フォームの内容をAPIに送信したいです！
-stateでemailとパスワードを保持してonSubmitが起きた時にサーバーにそれらを送る。。。というつもりで以下のコード書いてみました。
+buttonのonClickイベントに、APIにデータをわたす関数を当てています。
+一応、このコードでも送信はできているのですが文字入力をするたびにAPIに送信されてしまいます。
-しかしonSubmitのときに使う関数HandleSubmitが働いてないようでサーバーにつながらないです。
+文字入力中に意図せず送信されてしまうデータはちゃんと中身があるのですが、ボタンを押して送信した時の値は空になってしまっています。
-何かご教示いただけると嬉しいです。よろしくお願いします。
+どうすれば、buttonのクリックだけでデータを送信できるでしょうか。また、何か試すと良い事などあれば教えていただきたいです。
-以下、余計だと思うコードは省いて書かせていただきます。
-メイン
 ```jsx
-import {postLogin} from '../apis/login.jsx';
-import {
-  initialState,
-  loginActionTypes,
-  loginReducer
-} from '../reducers/login.jsx';
-export const Login = () => {
-  const [state, dispatch] = useReducer(loginReducer, initialState);
-  const handleChangeEmail = (e) => {
-    console.log(`${e.target.value}`)
-    dispatch({
-       type: loginActionTypes.WRITING,
-       email: e.target.value
-      });
-  }
-  const handleChangePassword = (e) => {
-    dispatch({
-       type: loginActionTypes.WRITING,
-       password: e.target.value
-      });
-  }
-//ここのconsole.logが出力されないので恐らくHundleSubmitが動いてないのかなと思います。
-  const HandleSubmit = () =>{
-    console.log("handlesubmitt")
-    useEffect(() =>{
+    <form>
-      dispatch({type: loginActionTypes.FETCHING});
-      postLogin({
-        email: state.email,
-        password: state.password,
-      })
-      .then((data) =>
-        dispatch({type: loginActionTypes.FETCH_SUCCESS})
-      )
-    },[])
-  }
-  return (
-    <form onSubmit={HandleSubmit}>
     <FormWrapper>
-      <TextFieldWrapper>
+    <TextFieldWrapper>
-        <TextField
+    <TextField
-           value={state.email}
+      id="standard-search"
-           onChange={handleChangeEmail}
+      label="Email"
-        />
+      name="email"
-      </TextFieldWrapper>
+      value={state.email}
-      <TextFieldWrapper>
+     onChange={handleChangeEmail}
-        <TextField
+    />
-           type="password"
+    </TextFieldWrapper>
-           value={state.password}
+    <TextFieldWrapper>
-           onChange={handleChangePassword}
+    <TextField
-        />
+      id="standard-password-input"
-      </TextFieldWrapper>
+      label="Password"
-      <ButtonWrapper>
+      type="password"
+      autoComplete="current-password"
+      name="password"
+      value={state.password}
+      onChange={handleChangePassword}
+    />
+    </TextFieldWrapper>
+    <ButtonWrapper>
-        <Button variant="contained" color="primary" type="submit">
+      <Button variant="contained" color="primary" type="submit" onClick={postLogin(
+        {
+          email:state.email,
+          password: state.password
+        })}>
         ログイン
-        </Button>
+      </Button>
-      </ButtonWrapper>
+    </ButtonWrapper>
-    </FormWrapper>
+  </FormWrapper>
-   </form>
+  </form>
-  )
-}
 ```
-APIにアクセスする部分
-```jsx
-import { login } from '../urls/index'
-export const postLogin = (params) =>{
-  return axios.post(login,
-    {
-      email: params.email,
-      password: params.password
-    }
-  )
-  .then(res => {
-    return res.data
-  })
-};
-```
-APIのurl
-```js
-const DEFAULT_API_LOCALHOST = 'http://localhost:3000/api/v1';
-export const login = `${DEFAULT_API_LOCALHOST}/login`
-```
-Railsのusers_controller、ログイン処理するAPI。
-```ruby
-module Api
-  module V1
-    class UsersController < ApplicationController
-      def login
-        user = User.find_by(email: params[:email], password: params[:password])
-        if params[:session] = user.id
-          puts "success!!"
-          render json: {}, status: :ok
-        else
-          puts "missed!!!"
-          render json: {}, status: :internal_server_error
-        end
-      end
-    end
-  end
-end
-```
-よろしくお願いします。
+よろしくおねがいします。

分かりやすく書き直した

2021/04/28 14:00

投稿

yaha4967

スコア106

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -194,7 +194,7 @@
-API
+APIにアクセスする部分
@@ -230,7 +230,7 @@
-url
+APIのurl
@@ -246,7 +246,7 @@
-users_controller
+Railsのusers_controller、ログイン処理するAPI。

質問文を見やすくなるよう書き直した。

2021/04/28 09:09

投稿

yaha4967

スコア106

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -1,11 +1,17 @@
+##したいこと
-サーバーサイドはRails, フロントエンドはReact hooksをつかっています。
+ログイン処理を実装したいです。
 ログイン処理をするためにユーザーからEmailとパスワードを入力してもらってサーバーに送りたいのですがやり方がわかりません。
+##開発環境
+サーバーサイド: Rails,
+フロントエンド: React hooksをつかっています。create-react-appベースです。
 ##試したこと

初心者マークとコードの追加

2021/04/28 09:06

投稿

yaha4967

スコア106

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -32,6 +32,12 @@
+メイン
 ```jsx
 import {postLogin} from '../apis/login.jsx';
@@ -179,3 +185,109 @@
 }
 ```
+API
+```jsx
+import { login } from '../urls/index'
+export const postLogin = (params) =>{
+  return axios.post(login,
+    {
+      email: params.email,
+      password: params.password
+    }
+  )
+  .then(res => {
+    return res.data
+  })
+};
+```
+url
+```js
+const DEFAULT_API_LOCALHOST = 'http://localhost:3000/api/v1';
+export const login = `${DEFAULT_API_LOCALHOST}/login`
+```
+users_controller
+```ruby
+module Api
+  module V1
+    class UsersController < ApplicationController
+      def login
+        user = User.find_by(email: params[:email], password: params[:password])
+        if params[:session] = user.id
+          puts "success!!"
+          render json: {}, status: :ok
+        else
+          puts "missed!!!"
+          render json: {}, status: :internal_server_error
+        end
+      end
+    end
+  end
+end
+```
+よろしくお願いします。