当前位置: 首页 > 面试题库 >

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

许奇
2023-03-14
问题内容

我的一个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);

对我而言,此解决方案是很棘手的,不是以一种反应的方式,而是可以满足您的用例。
在此处找到有效的解决方案:https :
//codesandbox.io/s/r52xll420m



 类似资料:
  • 问题内容: 我正在使用ASP.net Web应用程序。 我有一个带有提交按钮的表格。提交按钮的代码如下所示。 我想写如下内容: 我该怎么做呢? 问题答案: 你最好做… 如果返回,则您的表单不会提交。 您可能还应该将事件处理程序从内联移动。

  • 问题内容: 在下一页中,使用Firefox的“删除”按钮提交表单,但“添加”按钮不提交。如何防止“删除”按钮提交表单? 问题答案: 你正在使用HTML5按钮元素。请记住,原因是此按钮具有默认的提交行为,如W3规范所述,如此处所示: W3C HTML5按钮 因此,你需要明确指定其类型: 为了覆盖默认的提交类型。我只想指出发生这种情况的原因=)

  • 我有几个提交按钮的形式。如何确定在"之前提交"回调哪个按钮开始提交表单? 不幸的是,不包含任何提交按钮字段。 康科尔。对数(arr) 我只有一个表单,该表单有两个提交按钮 表单如下所示:

  • 问题内容: 我有一个Django项目,该项目在一页上具有多种形式(具有不同的标记),可以提交以产生不同的效果。在所有情况下,我都希望将用户重定向回同一页面,因此在我看来,我使用提交表单然后重定向到原始页面的模式。在至少一种情况下,两种形式之间的唯一区别是提交按钮的值。 在我看来,我有代码(这是我的视图函数第一次访问): 在模板中,第一个表单具有一个提交按钮,例如 我以为这样可以,但是当我提交该表格

  • 问题内容: 假设您以HTML表单创建向导。一键向后退,一键向前。当您按下时,由于 后退 按钮首先出现在标记中,它将使用该按钮提交表单。 例: 我想确定当用户按下时使用哪个按钮提交表单。这样,当您按下向导时,向导将移至下一页,而不是上一页。您是否必须使用此功能? 问题答案: 我希望这有帮助。我只是在按右边的按钮。 这样,按钮位于按钮的左侧,但在HTML结构中排在第一位: 优于其他建议的好处:没有Ja

  • 问题内容: 我有一个表格。在该表格之外,我有一个按钮。一个简单的按钮,如下所示: 但是,当我单击它时,它会提交表单。这是代码: 该按钮应该做的就是编写一些JavaScript。但是,即使看起来像上面的代码一样,它也会提交表单。当我将标签按钮更改为跨度时,它可以完美工作。但不幸的是,它必须是一个按钮。有什么办法可以阻止该按钮提交表单?像例如 问题答案: 我认为这是HTML最令人讨厌的小特性。该按钮必