如何将处于react组件状态的字符串传递到外部python文件

Question

一般来说，我不熟悉ReactJS和web开发

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

输入文本框和提交按钮是文件“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>
        );
    }
}

提前谢谢

Answer 1

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

然而，有人试图run Python via webassembly。你可以看看这些，看看它是否适用于你