ReactJSフロントエンドとflaskバックエンドがあり、フォーム変数をフロントエンドからFlaskに送信するために、両者が互いにやり取りするのに問題があります。
以下は、127.0.0.1:3000で実行される私のフロントエンドコードです。
import ReactDOM from 'react-dom';
import React, { Component } from 'react';
class Form1 extends Component{
render(){
return(
<div class="form">
<form action="/result" method="get">
<input type="text" name="place" />
<input type="submit" />
</form>
</div>
);
}
}
ReactDOM.render(
<Form1/>,
document.getElementById('root')
);
私のバックエンドflaskコードは以下のとおりで、127.0.0.1:5000で実行されます
from flask import Flask, render_template, request
import requests
import json
app = Flask(__name__)
@app.route('/result',methods = ['POST', 'GET'])
def result():
if request.method == 'GET':
result = request.form
print (result['place'])
私はあなたのコードを少し調整しました。私が行った変更:
http://localhost:5000/result
をフォームアクションパスとして追加しました。request.args.get
メソッドを使用して、送信された値を取得しました。フロントエンドはポート3000で実行され、バックエンドはポート5000で実行されています。両方ともlocalhost
にあります。
フロントエンドコード:
import ReactDOM from 'react-dom';
import React, {Component} from 'react';
class Form1 extends Component{
render(){
return (
<div class="form">
<form action="http://localhost:5000/result" method="get">
Place: <input type="text" name="place"/>
<input type="submit" value="Submit"/>
</form>
</div>
);
}
}
ReactDOM.render(
<Form1/>,
document.getElementById('root')
);
バックエンドコード:
from flask import Flask, request
app = Flask(__name__)
@app.route('/result', methods = ['GET', 'POST'])
def result():
if request.method == 'GET':
place = request.args.get('place', None)
if place:
return place
return "No place information is given"
if __name__ == '__main__':
app.run(debug = True)
実行中のプログラムのスクリーンショットは次のとおりです。
参考: