teratail
回答率
85.48%
質問するログイン新規登録
トップXAMPPに関する質問Reactとサーバーサイドの実装（Reactのコンポーネントの値をphpにPOSTしたい）

編集履歴

質問編集履歴

10

実現したいことの修正、jsxとphpの修正

2022/09/14 05:06

投稿

caren
caren

スコア25

test CHANGED
File without changes
test CHANGED
@@ -10,6 +10,20 @@
10
10
  私が実現したいのは、そのXAMPP環境にあるreactに書かれているinputタグなどに値を入力し、その値をphpにPOSTし、その値を元にXAMPPのmySQLにアクセスしてDBでなんやかんやしたいという、サーバーサイド側の実装です。Ractとphpをひとつのフォルダなりにまとめるのは難しいのでしょうか？
11
11
  初心者ですので見当違いな質問でしたらすみません。
12
12
 
13
+ jsx(React側について）
14
+ POSTする処理は　postData　に記載しています。
15
+ その中ではURLSearchParamsのインスタンスであるparamsを作成し、そのparamsにappendする形でPOSTしたいデータを追加しています。
16
+ URLSearchParamsを使用したのはcontent typeをapplication/x-www-form-urlencodedの形式でphpに送信したいと考えたからです。
17
+ また、axiosを使ってそのparamsを指定のURLに送るという処理を書いているつもりです。
18
+
19
+ phpについて
20
+ POSTされたデータを受け取って、$_POST[ ]をechoする処理を記載しています。
21
+
22
+ ☆わからない点
23
+ 通常のHTMLで書かれたformの内容をphpで受け取る時は、HTMLのフォーム内のinputタグのname属性をphpの$_POST[ 'name']のように
24
+ 指定すると受け取れると思います。URLSearchParamsのappendを利用するとき、phpでどのように受け取ればよいでしょうか？
25
+
26
+
13
27
  ### 発生している問題・エラーメッセージ
14
28
  しかしXAMPP環境でReactの開発をしている方が大変少ないようで、ググってもReact側からどうやってDBにアクセスするのかわかりませんでした。
15
29
 
@@ -20,15 +34,26 @@
20
34
  ### 該当のソースコード
21
35
 
22
36
  ```jsx
37
+
38
+ import { useForm } from 'react-hook-form';
23
39
  import axios from "axios";
24
- import React from 'react';
40
+ import React, { useState, useEffect } from 'react';
41
+ import { Button, Checkbox, Form } from 'semantic-ui-react'
25
42
 
26
43
  function LoginForm() {
44
+ const [firstName, setFirstName] = useState('');
45
+ const [lastName, setLastName] = useState('');
46
+ const [checkbox, setCheckbox] = useState(false);
27
47
 
28
- function test() {
48
+ const postData = () => {
49
+ console.log(firstName);
50
+ // console.log(lastName);
51
+ // console.log(checkbox);
29
- // let params = new URLSearchParams();
52
+ var params = new URLSearchParams();　
53
+ params.append('param1', firstName);
54
+ // params.append('param2', {lastName});
30
- // params.append('userid', '001');
55
+ // params.append('param3', {checkbox});
31
- axios.post('localhost/MyWeb0711/index.php', {useridvalue:useridvalue})
56
+ axios.post('localhost/MyWeb0711/index.php', params)
32
57
  .then((res) => {
33
58
  console.log(res.data.text);
34
59
  })
@@ -37,27 +62,34 @@
37
62
  });
38
63
  }
39
64
 
40
- const [useridvalue, setId] = useState('');
41
- const handleChange = (e) => {
42
- setId(e.target.value)
43
- }
44
-
45
- return (
65
+ return(
46
- <>
66
+ <div>
67
+ <Form className="create-form">
68
+ <Form.Field>
69
+ <label>First Name</label>
70
+ <input placeholder='First Name' value={firstName} onChange={(e) => setFirstName(e.target.value)}/>
71
+ </Form.Field>
72
+ <Form.Field>
47
- <h1>ログイン</h1>
73
+ <label>Last Name</label>
48
- <input id="userid" name="userid" value={useridvalue} type="text" onChange={handleChange} />
74
+ <input placeholder='Last Name' value={lastName} onChange={(e) => setLastName(e.target.value)}/>
75
+ </Form.Field>
76
+ <Form.Field>
77
+ <Checkbox label='I agree to the Terms and Conditions' checked={checkbox} onChange={(e) => setCheckbox(!checkbox)}/>
78
+ </Form.Field>
49
- <button type="submit" onClick={test}>ログイン</button>
79
+ <Button onClick={postData} type='submit'>Submit</Button>
80
+ </Form>
50
- </>
81
+ </div>
51
82
  );
52
83
  }
53
84
 
54
85
  export default LoginForm;
86
+
55
87
  ```
56
88
  ```php
57
89
  <?php
58
90
  if(!empty($_POST)){
59
- if(isset($_POST["userid"])){
91
+ if(isset($_POST['param1'])){
60
- echo $_POST["userid"];
92
+ echo $_POST['param1'];
61
93
  }else{
62
94
  echo 'name失敗';
63
95
  }
XAMPPReact.js

9

間違い修正

2022/09/14 02:33

投稿

caren
caren

スコア25

test CHANGED
File without changes
test CHANGED
@@ -45,7 +45,7 @@
45
45
  return (
46
46
  <>
47
47
  <h1>ログイン</h1>
48
- <input id="userid" name="useid" value={useridvalue} type="text" onChange={handleChange} />
48
+ <input id="userid" name="userid" value={useridvalue} type="text" onChange={handleChange} />
49
49
  <button type="submit" onClick={test}>ログイン</button>
50
50
  </>
51
51
  );
XAMPPReact.js

8

jsx内inputタグにname属性追加

2022/09/14 00:44

投稿

caren
caren

スコア25

test CHANGED
File without changes
test CHANGED
@@ -45,7 +45,7 @@
45
45
  return (
46
46
  <>
47
47
  <h1>ログイン</h1>
48
- <input id="userid" value={useridvalue} type="text" onChange={handleChange} />
48
+ <input id="userid" name="useid" value={useridvalue} type="text" onChange={handleChange} />
49
49
  <button type="submit" onClick={test}>ログイン</button>
50
50
  </>
51
51
  );
XAMPPReact.js

7

修正

2022/09/14 00:27

投稿

caren
caren

スコア25

test CHANGED
File without changes
test CHANGED
@@ -32,7 +32,7 @@
32
32
  .then((res) => {
33
33
  console.log(res.data.text);
34
34
  })
35
- .catch(error => {
35
+ .catch((error) => {
36
36
  console.log(error);
37
37
  });
38
38
  }
XAMPPReact.js

6

jsx post送信失敗したときのログ吐き処理追加、エラーメッセージなくなった

2022/09/14 00:24

投稿

caren
caren

スコア25

test CHANGED
File without changes
test CHANGED
@@ -15,11 +15,6 @@
15
15
 
16
16
  エラーメッセージ
17
17
  ```
18
- Access to XMLHttpRequest at 'http://localhost/MyWeb0711/index.php' from origin 'http://www.my-react-app.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
19
-
20
- xhr.js:220 POST http://localhost/MyWeb0711/index.php net::ERR_FAILED 200
21
-
22
- www.my-react-app.com/:1 Uncaught (in promise) a {message: 'Network Error', name: 'AxiosError', code: 'ERR_NETWORK', config: {…}, request: XMLHttpRequest, …}
23
18
  ```
24
19
 
25
20
  ### 該当のソースコード
@@ -36,6 +31,9 @@
36
31
  axios.post('localhost/MyWeb0711/index.php', {useridvalue:useridvalue})
37
32
  .then((res) => {
38
33
  console.log(res.data.text);
34
+ })
35
+ .catch(error => {
36
+ console.log(error);
39
37
  });
40
38
  }
41
39
 
XAMPPReact.js

5

jsx修正

2022/09/14 00:10

投稿

caren
caren

スコア25

test CHANGED
File without changes
test CHANGED
@@ -31,9 +31,9 @@
31
31
  function LoginForm() {
32
32
 
33
33
  function test() {
34
- let params = new URLSearchParams();
34
+ // let params = new URLSearchParams();
35
- params.append('userid', '001');
35
+ // params.append('userid', '001');
36
- axios.post('localhost/MyWeb0711/index.php', params)
36
+ axios.post('localhost/MyWeb0711/index.php', {useridvalue:useridvalue})
37
37
  .then((res) => {
38
38
  console.log(res.data.text);
39
39
  });
XAMPPReact.js

4

jsx側修正

2022/09/14 00:04

投稿

caren
caren

スコア25

test CHANGED
File without changes
test CHANGED
@@ -25,8 +25,6 @@
25
25
  ### 該当のソースコード
26
26
 
27
27
  ```jsx
28
- ソースコード
29
- ```ここに言語を入力
30
28
  import axios from "axios";
31
29
  import React from 'react';
32
30
 
@@ -41,10 +39,15 @@
41
39
  });
42
40
  }
43
41
 
42
+ const [useridvalue, setId] = useState('');
43
+ const handleChange = (e) => {
44
+ setId(e.target.value)
45
+ }
46
+
44
47
  return (
45
48
  <>
46
49
  <h1>ログイン</h1>
47
- <input id="userid" type="text" />
50
+ <input id="userid" value={useridvalue} type="text" onChange={handleChange} />
48
51
  <button type="submit" onClick={test}>ログイン</button>
49
52
  </>
50
53
  );
XAMPPReact.js

3

jsxとphpのコード修正

2022/09/13 23:44

投稿

caren
caren

スコア25

test CHANGED
File without changes
test CHANGED
@@ -31,24 +31,42 @@
31
31
  import React from 'react';
32
32
 
33
33
  function LoginForm() {
34
+
35
+ function test() {
34
- let formdata=new URLSearchParams();
36
+ let params = new URLSearchParams();
37
+ params.append('userid', '001');
35
- axios.post( 'http://localhost/MyWeb0711/index.php', formdata) ←サーバー側URL
38
+ axios.post('localhost/MyWeb0711/index.php', params)
36
- .then( ( res ) => {
39
+ .then((res) => {
37
- console.log(res);
40
+ console.log(res.data.text);
38
- } );
41
+ });
39
-
42
+ }
40
43
 
41
44
  return (
42
45
  <>
43
46
  <h1>ログイン</h1>
44
- <input id="userid" type="text" /> ←ここの値をpostしたい
47
+ <input id="userid" type="text" />
45
- <button type="submit">ログイン</button>
48
+ <button type="submit" onClick={test}>ログイン</button>
46
49
  </>
47
50
  );
48
51
  }
49
52
 
50
53
  export default LoginForm;
51
54
  ```
55
+ ```php
56
+ <?php
57
+ if(!empty($_POST)){
58
+ if(isset($_POST["userid"])){
59
+ echo $_POST["userid"];
60
+ }else{
61
+ echo 'name失敗';
62
+ }
63
+ }else{
64
+ echo 'post失敗';
65
+ }
66
+ ?>
67
+
68
+ ```
69
+
52
70
 
53
71
 
54
72
  ### 試したこと
XAMPPReact.js

2

間違い修正

2022/09/13 04:32

投稿

caren
caren

スコア25

test CHANGED
File without changes
test CHANGED
@@ -48,7 +48,7 @@
48
48
  }
49
49
 
50
50
  export default LoginForm;
51
-
51
+ ```
52
52
 
53
53
 
54
54
  ### 試したこと
XAMPPReact.js

1

ドキュメントルートの追加とコードの追加

2022/09/13 04:31

投稿

caren
caren

スコア25

test CHANGED
File without changes
test CHANGED
@@ -2,6 +2,8 @@
2
2
  Reactの勉強中です。
3
3
  create react appで作成したフォルダを　npm run build し、できたbuildフォルダをドキュメントルートとしてXAMPP上で動かしています。
4
4
  とりあえず簡単な画面は作成できました。
5
+
6
+ ドキュメントルート：C:\Users\アカウント名\react_app\build
5
7
 
6
8
  ### 実現したいこと
7
9
 
@@ -13,12 +15,41 @@
13
15
 
14
16
  エラーメッセージ
15
17
  ```
18
+ Access to XMLHttpRequest at 'http://localhost/MyWeb0711/index.php' from origin 'http://www.my-react-app.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
19
+
20
+ xhr.js:220 POST http://localhost/MyWeb0711/index.php net::ERR_FAILED 200
21
+
22
+ www.my-react-app.com/:1 Uncaught (in promise) a {message: 'Network Error', name: 'AxiosError', code: 'ERR_NETWORK', config: {…}, request: XMLHttpRequest, …}
23
+ ```
16
24
 
17
25
  ### 該当のソースコード
18
26
 
19
- ```ここに言語名を入力
27
+ ```jsx
20
28
  ソースコード
21
- ```
29
+ ```ここに言語を入力
30
+ import axios from "axios";
31
+ import React from 'react';
32
+
33
+ function LoginForm() {
34
+ let formdata=new URLSearchParams();
35
+ axios.post( 'http://localhost/MyWeb0711/index.php', formdata) ←サーバー側URL
36
+ .then( ( res ) => {
37
+ console.log(res);
38
+ } );
39
+
40
+
41
+ return (
42
+ <>
43
+ <h1>ログイン</h1>
44
+ <input id="userid" type="text" /> ←ここの値をpostしたい
45
+ <button type="submit">ログイン</button>
46
+ </>
47
+ );
48
+ }
49
+
50
+ export default LoginForm;
51
+
52
+
22
53
 
23
54
  ### 試したこと
24
55
 
XAMPPReact.js