我的一个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最令人讨厌的小特性。该按钮必