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

Question

我目前正在处理一个渠道，在几个页面上，用户必须上传文件才能在此渠道中取得进展。我的问题是，用户在页脚中使用“下一个”和“上一个”按钮浏览页面，我希望我的应用在文件上传仍为空时单击“下一步”时显示“无效”反馈。

这是我的 page.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);

如果你需要，这里是我的 footer.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)}
/>

类似的东西。在您的页脚中，您现在拥有显示所需反馈的信息。

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