如何从 React 中该组件外部的按钮提交表单? [英] How to submit form from a button outside that component in React?

问题描述

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

为了更清楚，我有以下几点:

import React, { Component } from "react";从react-dom"导入 ReactDOM；类 CustomForm 扩展组件 {使成为() {返回 (<form onSubmit={alert('表单已提交！')}><button type='submit'>在自定义里面</button></表单>);}}功能应用(){返回 (<div><自定义表单/><button>在根目录</button>

);}const rootElement = document.getElementById("root");ReactDOM.render(, rootElement);

现在，我可以使用标题为Inside Custom"的按钮提交表单，但我也希望能够使用位于根组件中的标题为In Root"的按钮提交表单.有没有办法以某种方式将该按钮的引用传递给该自定义组件，并在单击 In Root 按钮时实际提交表单?

解决方案

编辑:简单而正确的答案:https://stackoverflow.com/a/53573760/5271656

在 React 中，数据向下流动，动作向上流动.所以通知子组件关于父组件中的按钮单击.
这就是你如何做到这一点.

import React, { Component } from "react";从react-dom"导入 ReactDOM；类 CustomForm 扩展组件 {handleOnSubmit = e =>{e.preventDefault();//传递表单数据//从状态中获取const formData = {};this.finallySubmit(formData);};finallySubmit = formData =>{alert("表单已提交！");};componentDidUpdate(prevProps, prevState) {如果(this.props.submitFromOutside){//传递表单数据//从状态中获取const formData = {};this.finallySubmit();}}使成为() {返回 (<form onSubmit={this.handleOnSubmit}><button type="submit">内部自定义</button></表单>);}}类 App 扩展组件 {构造函数(道具){超级(道具)；this.state = {submitFromOutside: 假};}submitCustomForm = () =>{this.setState({submitFromOutside: 真});};componentDidMount() {控制台日志(this.form)；}使成为() {返回 (<div><CustomForm submitFromOutside={this.state.submitFromOutside}/><button onClick={this.submitCustomForm}>在根目录</button>

);}}const rootElement = document.getElementById("root");ReactDOM.render(, rootElement);

对我来说，这个解决方案很笨拙，不是以反应方式，而是为您的用例服务.
在此处找到工作解决方案:https://codesandbox.io/s/r52xll420m

I have a form in one of my React components, and and in the outside component that calls it I want to pass a reference to a button there, so that I can also submit that using that button.

To make it more clear I have the following:

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);

Now, I can submit the form using the button titled 'Inside Custom', but I also want to be able to submit the form using the button titled 'In Root' that is located in the root component. Is there a way to somehow pass reference from that button to that custom component, and actually submit the form when In Root button is clicked?

解决方案

Edit: Simple and correct answer: https://stackoverflow.com/a/53573760/5271656

In React, data flows down and actions flow up. So notify child component about button click in the parent.
This is how you can do this.

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);  

To me, this solution is hacky and not in a react way but serves your use-case.
Find working solution here:https://codesandbox.io/s/r52xll420m

这篇关于如何从 React 中该组件外部的按钮提交表单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！