如何将反应组件状态的字符串传递给外部python文件答案

【问题标题】：How to pass a string in the state of a react component to an external python file如何将反应组件状态的字符串传递给外部python文件
【发布时间】：2021-05-29 16:45:18
【问题描述】：

我是 ReactJS 和 web 开发的新手。

我正在创建一个网络应用程序，我在其中输入来自用户的字符串（数学表达式）。按下提交按钮后，我想在 python 脚本中处理这个字符串，并在输出文本框中返回所需的输出。如何使这个 python 脚本成为我的网络应用程序的永久部分。

输入文本框和提交按钮是文件“Submit.js”中提交组件的一部分。输出文本框是“Solution.js”文件中解决方案组件的一部分。

这两个组件都是 LeftWindowComponent 的子组件。我将两个文本框的值存储在父组件的状态中，即 LeftWindowComponent。状态“fx”定义输入文本框中的文本。状态“fprimex”定义解决方案（输出）文本框中的文本。

快照供参考 -

提交组件代码-->

class Submit extends Component{
    constructor(props){
        super(props);  
    }

    render(){
        return(
            <div className="center">
            <div>
            <Form onSubmit={this.handleSubmit}>
                <Col md={{ size: 6, offset: 3 }} >
            <FormGroup row>
                <Input type="text" id="fx" name="fx" placeholder="Type Here" value = {this.props.fx} onChange={this.props.handleInputChangeFromKeyboard} />      
            </FormGroup>
            </Col>
            </Form>
            <Button type="submit" color="primary">Differentiate</Button>
            </div></div>    
        )
    }
}

解决方案组件代码 -->

class Solution extends Component{
    constructor(props){
        super(props);  
    }

    render(){
        return(
            <div class = "center">
            <Form>
            <FormGroup>
                <Col md={{size:8,offset:2}}>
                <Input type="textarea" id="fprimex" name="fprimex" placeholder="Solution" value = {this.props.fprimex} />
                </Col>
            </FormGroup>
            </Form>
            </div>    
        )

LeftWindow 组件代码 -->

class LeftWindow extends Component{
    constructor(props){
        super(props);
        this.state = {
            fx: "",
            fprimex: "",
        }; 
    }
    handleInputChange = (newInput) => {
        this.setState({
            fx: this.state.fx.concat(newInput),
        });
    }   ;
    handleInputChangeFromKeyboard = (event) => {
        const target = event.target;
        const value = target.value;
        const name = target.name;
        this.setState({
                [name]: value
        });
    }   ;
    render(){
        return(
            <div className="col-12 bg-dark fullheight">
                <h3 className="center">Enter the function to be differentiated</h3>
                <Buttons handleInputChange={this.handleInputChange} />
                <Submit fx = {this.state.fx} handleInputChange={this.handleInputChange} handleInputChangeFromKeyboard = {this.handleInputChangeFromKeyboard}/>
                <Solution fprimex = {this.state.fprimex}/>
            </div>
        );
    }
}

提前致谢！

【问题讨论】：

我相信你必须为你的应用程序设置一个后端。如果你想使用 python，你可以使用 Flask。这是一个使用烧瓶反应的教程：blog.miguelgrinberg.com/post/…
你添加的代码完全不相关。您只需使用适当的选项调用 fetch 函数将值发布到服务器，处理值并返回您想要的任何内容。

标签： javascript python node.js reactjs

【解决方案1】：

你不能在前端部分包含你的脚本，因为浏览器不理解 python。您将不得不使用一些服务器，您的前端将从输入中发送数据，服务器将运行您的 python 脚本。

不过有人尝试run Python via webassembly。你可以看看这些，看看它是否适用于你。

【讨论】：

【解决方案2】：

创建一个 python 烧瓶服务器并公开一些端点和路由。您可以在您的反应代码（usng axios 等）中调用这些端点，发送数据进行计算，从服务器接收响应并通过您的应用程序显示在浏览器上。供您参考：https://developer.okta.com/blog/2018/12/20/crud-app-with-python-flask-react

【讨论】：