如何从React中的另一个组件调用表单onSubmit事件

Question

我目前正在开发一个漏斗，在一些页面上，用户必须上传文件才能在该漏斗中进行操作。我在这里的问题是，用户在页脚中导航具有下一个和上一个按钮的页面；无效"；当用户点击下一个上传的文件仍然为空时的反馈。

这是我的页面.js:

import React, { Component } from "react";
import { withRouter } from "react-router-dom";
//React-Bootstrap components import
import { Col, Container, Form, ProgressBar, Row } from "react-bootstrap";
import {
Check2Circle,
CloudUploadFill,
ShieldLockFill,
} from "react-bootstrap-icons";
import { Footer } from "../../components/footer";
import PageTitle from "../../components/page_title";
class IdPage extends Component {
constructor(props) {
super(props);
this.state = {
file: this.props.file, //So if the user go back and come back on this page, the file stay in memory
};
this.onFormChange = this.onFormChange.bind(this);
}
nextPath() {
if (this.state.file === null) { //here is my condition (quiet simple but efficient) to cancel the "next" button action
return;
}
this.props.history.replace("6"); //I know that the replace function can be weird but I'll fix that later
}
previousPath(type) {
this.props.history.replace("4");

}
onChange(e) {
this.setState({ file: e.target.files[0] });
this.props.onFileChange(e);
}
render() {
const { type, service } = this.props;
var label = (
<span>
<CloudUploadFill size={20} color={`${lightblue}`} />
{"    "}Mon justificatif d’identité
</span>
);
if (this.state.file) {
label = this.state.file.name;
}
return (
<>
<Container style={{ marginBottom: "120px" }} fluid>
<Row className="justify-content-center">
<Col lg={5} md={8} className="my-auto pt-4 main-fontsize">
<PageTitle text={`Mon nouveau contrat ${service}`} />
//Some text
{/* Form input to upload id document */}
<Form
noValidate
validated={this.state.validated}
className="my-3"
>
<Form.File
id="custom-file"
label=label
data-browse="Choose"
onChange={(e) => this.onChange(e)}
custom
required
isInvalid={!this.state.validated}
>
<Form.Control.Feedback type="invalid">
//invalid message
</Form.Control.Feedback>
</Form.File>
<Form.Text style={{ color: `${blue}` }}>
This file needs to be a pdf file or an image
</Form.Text>
</Form>
</Col>
</Row>
</Container>
<Footer
nextPage={() => this.nextPath()}
previousPage={() => this.previousPath(type)}
/>
</>
);
}
}
export default withRouter(IdPage);

如果你需要，这里是我的页脚.js:

import React from "react";
import { Container, Button, Row } from "react-bootstrap";
export const Footer = (props) => {
let previousButtonValue =
props.previousButtonValue === undefined ? "Previous" : "" ;
let bluebuttonvalue =
props.buttonValue === undefined ? "Next" : props.buttonValue;
return (
<footer
className="site-footer shadow-lg"
style={{
position: "fixed",
bottom: 0,
width: "100%",
backgroundColor: "white",
}}
>
<Container className="py-3" fluid>
<Container>
<Row className="justify-content-between my-auto">
<p className="ml-2 my-auto">
<a
className="primary"
onClick={props.previousPage}
style={{ cursor: "pointer" }}
>
<u>{previousButtonValue}</u>
</a>
</p>
<Button
className="text-right rounded-pill"
onClick={props.nextPage}
>
{bluebuttonvalue}
</Button>
</Row>
</Container>
</Container>
</footer>
);
};
export default {
Footer,
};

Answer 1

我不确定我是否理解您的问题，但会尽力提供帮助。

您需要显示什么样的反馈？

正如我所看到的，你已经有了一个处理下一个问题的功能：

nextPath() {
if (this.state.file === null) {
return;
}
this.props.history.replace("6"); 

}

你可以在这里处理你需要的任何事情。你在这里有你需要的信息。

然而，具体了解你想要什么样的反馈会很有帮助。你想干什么？

反馈应该在页脚中吗？

如果是这种情况，我认为您已经在组件中获得了所需的所有信息。你知道什么时候上传了文件。只需将该信息作为道具传递给页脚，并在那里处理此反馈。

<Footer
isNextEnabled={!!this.state.file}
nextPage={() => this.nextPath()}
previousPage={() => this.previousPath(type)}
/>

像这样的东西。在您的页脚中，您现在可以显示所需的任何反馈信息。

如果我误解了你的问题，请告诉我。