我想在点击链接后提交React表单 .
为此,我需要以编程方式提交表单,如果单击该链接 .
my problem is : onSubmit handler is not being fired after the form submit .
这是我为此目的剪辑的代码:
var MyForm = React.createClass({
handleSubmit: function(e){
console.log('Form submited');
e.preventDefault();
},
submitForm : function(e){
this.refs.formToSubmit.submit();
},
render: function() {
return (
<form ref="formToSubmit" onSubmit={this.handleSubmit}>
<input name='myInput'/>
<a onClick={this.submitForm}>Validate</a>
</form>);
}
});
ReactDOM.render(
<MyForm name="World" />,
document.getElementById('container')
);
不调用 handleSubmit
并执行默认行为(正在提交的表单) . 这是一个ReactJs错误还是正常行为?有没有办法调用onSubmit处理程序?
6 回答
我成功了 . 这会在单击时触发handleSubmit . 希望这可以帮助 .
从这里找到:https://github.com/facebook/react/issues/6796
我有同样的问题,但无法解决它 . 不管我做了什么,做
document.querySelector('form').submit()
都不会触发onSubmit
处理程序 . 我尝试包含一个看不见的<input type="submit">
,但仍然不会触发它 . 所以我只是更改为保持隐形提交(style="display:none"
),然后在该隐形提交按钮上执行.click()
,令人惊讶的是它甚至可以用display:none
工作 . 我只在Firefox中测试过 .您当前的
onSubmit
绑定触发React SyntheticEvent而不是本机表单提交事件 . 这就解释了为什么this.refs.formToSubmit.submit();
没有触发你的处理程序 . 据我所知,尝试手动触发SyntheticEvent并不是一个值得推荐的或值得追求的 .我相信实现这一目标的惯用方法是将JSX / HTML结构化为使用
<button>
或<input>
类型的提交 . 其中任何一个都会触发你的handleSubmit
处理程序 . 在我看来,它将降低复杂性,巩固您的处理程序,并且似乎是您最好的解决方案 .例如
<input type="submit" value="Validate" />
<button type="submit">Validate</button>
您不应期望表单引用默认情况下为您附加一个附加回调
submit
. 当使用以编程方式设置DOM元素refs
之类的东西时,这将是框架的糟糕设计 .您应该使用
ref
以您想要的任何顺序实例化所需的所有事件,而不是依赖ref
[由form
元素实例化]的无法实现的内部实现 .这有效:
实际
submit
应始终最后出现 .这与React无关 . 它是DOM API的"feature":
.submit()
方法实际上不会触发submit
事件,也不会触发输入验证 . 见http://codetheory.in/javascript-fire-onsubmit-by-calling-form-submit/ .正如建议的那样,可能的解决方法是创建一个提交按钮,并以编程方式在其上调用
.click()
. 或者,您可以使用new Event()
以编程方式创建submit
事件,并使用.dispatchEvent()
进行调度 . 但是,new Event()
在IE中不可用 .您应该使用类型为submit而不是anchor标记的输入标记,因为锚标记不会触发提交事件 .