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

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

新規登録して質問してみよう
ただいま回答率
86.12%
XAMPP

XAMPP(ザンプ)は、ウェブアプリケーションの実行に必要なフリーソフトウェアをパッケージングしたApacheディストリビューションです。 XAMPPひとつインストールするだけで、Apache、MySQL、PHP、Perlなどのソフトウェアと、 phpMyAdminなどの管理ツール、SQLiteなどのソフトウェアやライブラリモジュールなどを利用することが可能です。

React.js

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

受付中

Reactとサーバーサイドの実装(Reactのコンポーネントの値をphpにPOSTしたい)

caren
caren

総合スコア3

XAMPP

XAMPP(ザンプ)は、ウェブアプリケーションの実行に必要なフリーソフトウェアをパッケージングしたApacheディストリビューションです。 XAMPPひとつインストールするだけで、Apache、MySQL、PHP、Perlなどのソフトウェアと、 phpMyAdminなどの管理ツール、SQLiteなどのソフトウェアやライブラリモジュールなどを利用することが可能です。

React.js

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

1回答

0リアクション

0クリップ

260閲覧

投稿2022/09/13 02:41

編集2022/09/14 05:06

前提

Reactの勉強中です。
create react appで作成したフォルダを npm run build し、できたbuildフォルダをドキュメントルートとしてXAMPP上で動かしています。
とりあえず簡単な画面は作成できました。

ドキュメントルート:C:\Users\アカウント名\react_app\build

実現したいこと

私が実現したいのは、そのXAMPP環境にあるreactに書かれているinputタグなどに値を入力し、その値をphpにPOSTし、その値を元にXAMPPのmySQLにアクセスしてDBでなんやかんやしたいという、サーバーサイド側の実装です。Ractとphpをひとつのフォルダなりにまとめるのは難しいのでしょうか?
初心者ですので見当違いな質問でしたらすみません。

jsx(React側について)
POSTする処理は postData に記載しています。
その中ではURLSearchParamsのインスタンスであるparamsを作成し、そのparamsにappendする形でPOSTしたいデータを追加しています。
URLSearchParamsを使用したのはcontent typeをapplication/x-www-form-urlencodedの形式でphpに送信したいと考えたからです。
また、axiosを使ってそのparamsを指定のURLに送るという処理を書いているつもりです。

phpについて
POSTされたデータを受け取って、$_POST[ ]をechoする処理を記載しています。

☆わからない点
通常のHTMLで書かれたformの内容をphpで受け取る時は、HTMLのフォーム内のinputタグのname属性をphpの$_POST[ 'name']のように
指定すると受け取れると思います。URLSearchParamsのappendを利用するとき、phpでどのように受け取ればよいでしょうか?

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

しかしXAMPP環境でReactの開発をしている方が大変少ないようで、ググってもReact側からどうやってDBにアクセスするのかわかりませんでした。

エラーメッセージ

該当のソースコード

jsx

import { useForm } from 'react-hook-form'; import axios from "axios"; import React, { useState, useEffect } from 'react'; import { Button, Checkbox, Form } from 'semantic-ui-react' function LoginForm() { const [firstName, setFirstName] = useState(''); const [lastName, setLastName] = useState(''); const [checkbox, setCheckbox] = useState(false); const postData = () => { console.log(firstName); // console.log(lastName); // console.log(checkbox); var params = new URLSearchParams();  params.append('param1', firstName); // params.append('param2', {lastName}); // params.append('param3', {checkbox}); axios.post('localhost/MyWeb0711/index.php', params) .then((res) => { console.log(res.data.text); }) .catch((error) => { console.log(error); }); } return( <div> <Form className="create-form"> <Form.Field> <label>First Name</label> <input placeholder='First Name' value={firstName} onChange={(e) => setFirstName(e.target.value)}/> </Form.Field> <Form.Field> <label>Last Name</label> <input placeholder='Last Name' value={lastName} onChange={(e) => setLastName(e.target.value)}/> </Form.Field> <Form.Field> <Checkbox label='I agree to the Terms and Conditions' checked={checkbox} onChange={(e) => setCheckbox(!checkbox)}/> </Form.Field> <Button onClick={postData} type='submit'>Submit</Button> </Form> </div> ); } export default LoginForm;

php

<?php if(!empty($_POST)){ if(isset($_POST['param1'])){ echo $_POST['param1']; }else{ echo 'name失敗'; } }else{ echo 'post失敗'; } ?>

試したこと

Fetchで試してみる→phpにリクエストが送れていなさそう
axiosで試してみる→上に同じ

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

kazto

2022/09/13 04:18

- サーバ、クライアントの構成が適切に構築されているか - コードが適切に記述されているか が示されていないため、回答が困難です。 上記を追記おねがいします。
caren

2022/09/13 04:37

サーバ、クライアントの構成が適切に構築されているか、というのがよくわかっていません。 具体的にどのような情報を載せたらよいか教えていただけないでしょうか。
kazto

2022/09/13 04:45

同一のlocalhostで動かしていたとしても、php側(サーバ側)とReact側(フロントエンド)は分けて考えた方がよいです。 phpのコードは単体で動作することは確認できていますか? また、追記いただいたエラー文から、フロントエンドはwww.my-react-app.com という外部ホストから動作しているように見受けられます。このホストに関する情報を記載おねがいします。
caren

2022/09/13 04:55

XAMPPのバーチャルホストという設定を変更していて、configファイルは下記のように変更しております。 変更したファイル "C:\xampp\apache\conf\extra\httpd-vhosts.conf" <VirtualHost 127.0.0.1:80> ServerName my-react-app.com ServerAlias www.my-react-app.com ServerAdmin webmaster@my-react-app.com DocumentRoot "C:\Users\アカウント名\react_app\build" <Directory C:\Users\アカウント名\react_app\build> Options Indexes FollowSymLinks MultiViews AllowOverride all Order Deny,Allow Allow from all Require all granted </Directory> </VirtualHost> 初歩的な質問で申し訳ないのですが、php側でも受け取る処理を書かないとエラーになってしまうのでしょうか?とりあえずまずクライアント側からサーバ側へPOSTできたらいいかな、位に考えていたので。php側が単体で動作する、というのはエラーがなければOKなのでしょうか?例えばクライアント側からPOSTが受け取れたらechoで出力する程度のもので大丈夫でしょうか?(何もわからずまだphpのHTMLしか書けていないため。)
kazto

2022/09/13 06:15

> php側でも受け取る処理を書かないとエラーになってしまうのでしょうか? おっしゃるとおりです。受け取ることができないところにデータを送信しても、エラーとなります。 > 例えばクライアント側からPOSTが受け取れたらechoで出力する程度のもので大丈夫でしょうか? そうですね、まずはそれくらいで問題ないと思います。
caren

2022/09/13 23:52 編集

ご回答ありがとうございます。とりあえずjsxとphp側を修正しました。 php側は問題なく動くことは確認済みです。 jsxの方のコードに関してお聞きしたいです。 まず、jsxからpostする方法についてです。コードの中でURLSearchParamsのインスタンスを作り、それをaxiosでpostする、ということをやっています。しかしFormDataの方がよいという記事もみかけました。どちらが良いのか知識をお持ちでしたら教えていただきたいです。 また、最終的な目標はinputで入力された値をpostすることなのですが、Reactでなければformタグで囲ってaction属性で送信先を指定して、みたいな形で実現できると思うのですが、それをReactで実現する方法をご存じであれば教えていただきたいです。React Hook Formを使うか、使わないで実装するかも迷いました。React Hook Formを使うと制御コンポーネント(Reactのstateが管理する)、使わなければ非制御コンポーネント(DOMが管理する)位の知識しかありませんが、ご回答くだされば幸いです。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

同じタグがついた質問を見る

XAMPP

XAMPP(ザンプ)は、ウェブアプリケーションの実行に必要なフリーソフトウェアをパッケージングしたApacheディストリビューションです。 XAMPPひとつインストールするだけで、Apache、MySQL、PHP、Perlなどのソフトウェアと、 phpMyAdminなどの管理ツール、SQLiteなどのソフトウェアやライブラリモジュールなどを利用することが可能です。

React.js

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