React 无法在控制台中打印表单数据

问题描述

所以，这是我的 App.js 文件，下一张图片是我点击提交时得到的。我想让所有输入的值都打印在控制台上，但这没有发生。

我也使用 Flask 作为后端，我想将所有这些数据放入 app.py 中，那么该怎么做？

class App extends React.Component {
 

constructor(props) {
    super(props);
    this.state = {
        petalLen: "",petalWid: "",sepalLen: "",sepalWid: "",};
    this.handleOnChange = this.handleOnChange.bind(this);
}
handleOnChange(event) {
    this.setState({ [event.target.name]: event.target.value });
}
handleSubmit(event) {
    event.preventDefault();
    const data = new FormData(event);

    for (let [key,value] of data.entries()) {
        console.log(key,value);
    }
}

render() {
    return (
        <div className="App">
            <h1>Deploy Models for Humans </h1>
            <Form>
                <Container>
                    <Row className="Rr">
                        <Col>
                            <Form.Label>Petal Length</Form.Label>
                            <Form.Control
                                type="text"
                                name="petalLen"
                                value={this.state.petalLen}
                                onChange={this.handleOnChange}
                                placeholder="Petal Length"
                            />
                        </Col>
                        <Col>
                            <Form.Group>
                                <Form.Label>Petal Width</Form.Label>
                                <Form.Control
                                    type="text"
                                    name="petalWid"
                                    value={this.state.petalWid}
                                    onChange={this.handleOnChange}
                                    placeholder="Petal Width"
                                />
                            </Form.Group>
                        </Col>
                        <Col>
                            <Form.Group>
                                <Form.Label>Sepal Length</Form.Label>
                                <Form.Control
                                    type="text"
                                    name="sepalLen"
                                    value={this.state.sepalLen}
                                    onChange={this.handleOnChange}
                                    placeholder="Sepal Length"
                                />
                            </Form.Group>
                        </Col>
                        <Col>
                            <Form.Group>
                                <Form.Label>Sepal Width</Form.Label>
                                <Form.Control
                                    type="text"
                                    name="sepalWid"
                                    value={this.state.sepalWid}
                                    onChange={this.handleOnChange}
                                    placeholder="Sepal Width"
                                />
                            </Form.Group>
                        </Col>
                    </Row>

                    <Button variant="primary" type="submit" onClick={this.handleSubmit}>
                        Submit
                    </Button>
                </Container>
            </Form>
        </div>
    );
}

}

在我点击提交后：

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）