如何从React中该组件外部的按钮提交表单？

Z时代
2024-01-10
分类：问答

我的一个React组件中有一个表单，在调用它的外部组件中有一个表单，我想在那里传递对按钮的引用，以便我也可以使用该按钮提交该表单。

为了更清楚一点，我有以下内容：

import React, { Component } from "react";
import ReactDOM from "react-dom";
class CustomForm extends Component {
  render() {
    return (
      <form onSubmit={alert('Form submitted!')}>
        <button type='submit'>Inside Custom</button>
      </form>
    );
  }
}
function App() {
  return (
    <div>
      <CustomForm />
      <button>In Root</button>
    </div>
  );
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

现在，我可以使用标题为“ Inside Custom”的按钮提交表单，但是我也希望能够使用位于根组件中的标题为“ In

Root”的按钮提交表单。有没有办法将引用从该按钮传递到该自定义组件，并在In Root单击按钮时实际提交表单？

回答：

在React中，数据流向下，动作流向上。因此，通知子组件有关父组件中按钮单击的信息。

这就是您可以执行的操作。

import React, { Component } from "react";
import ReactDOM from "react-dom";
class CustomForm extends Component {
  handleOnSubmit = e => {
    e.preventDefault();
    // pass form data
    // get it from state
    const formData = {};
    this.finallySubmit(formData);
  };
  finallySubmit = formData => {
    alert("Form submitted!");
  };
  componentDidUpdate(prevProps, prevState) {
    if (this.props.submitFromOutside) {
      // pass form data
      // get it from state
      const formData = {};
      this.finallySubmit();
    }
  }
  render() {
    return (
      <form onSubmit={this.handleOnSubmit}>
        <button type="submit">Inside Custom</button>
      </form>
    );
  }
}
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      submitFromOutside: false
    };
  }
  submitCustomForm = () => {
    this.setState({
      submitFromOutside: true
    });
  };
  componentDidMount() {
    console.log(this.form);
  }
  render() {
    return (
      <div>
        <CustomForm submitFromOutside={this.state.submitFromOutside} />
        <button onClick={this.submitCustomForm}>In Root</button>
      </div>
    );
  }
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);