Javascript 表单onSubmit方法在react.js中不起作用
表单onSubmit方法(_updateThing)未在我的react.js应用程序中激发。Javascript 表单onSubmit方法在react.js中不起作用,javascript,Javascript,表单onSubmit方法(_updateThing)未在我的react.js应用程序中激发。 源代码如下所示。 我认为这个问题很容易,但我花了很多时间去检查,无法解决。请帮助我 我的代码有什么问题: export default React.createClass({ displayName: 'ThingContainer', statics: { load: function (context) { return ThingActions.getData(cont
源代码如下所示。
我认为这个问题很容易,但我花了很多时间去检查,无法解决。请帮助我
我的代码有什么问题:
export default React.createClass({
displayName: 'ThingContainer',
statics: {
load: function (context) {
return ThingActions.getData(context);
}
},
mixins: [ContextMixin, MaterialRebindMixin],
getInitialState() {
return getThings();
},
_updateThing(e) {
alert(1);
e.preventDefault();
},
_setChangedText(event) {
alert('change');
},
render() {
return (
<div>
<div>
<div>
<h2>Title</h2>
</div>
<form onSubmit={this._updateThing}>
<div >
<Label htmlFor="changeQuantity" text="" />
<Input id="changeQuantity" name="changeQuantity" type="text" onChange={this._setChangedText} />
</div>
<div className="form-footer">
<div style={{float: 'right'}}>
<input type="submit" value="submit" />
</div>
</div>
</form>
</div>
</div>
);
}
});
export default React.createClass({
displayName:“ThingContainer”,
静力学:{
加载:函数(上下文){
返回ThingActions.getData(上下文);
}
},
mixin:[ContextMixin,MaterialRebindMixin],
getInitialState(){
返回getThings();
},
_更新(e){
警报(1);
e、 预防默认值();
},
_setChangedText(事件){
警报(“变更”);
},
render(){
返回(
标题
);
}
});
我将“formonsubmit={this.\u updateThing}”更改为“formonsubmit={this.\u updateThing.bind(this)}”,但没有任何更改。
我还使用Chrome开发控制台检查html源代码,html源代码中没有显示onSubmit方法(_updateThing)。
感谢您的改进。问题在于,
此
的上下文没有被保留。如果您使用的是React.createClass
,这个
会自动绑定(),如果您是一个正在迁移到ES6类的React开发人员,这可能会让您陷入循环。对于ES6类构造函数语法,情况并非如此,您必须在适当的时候绑定自己的方法。最常见的方法是在JSX中绑定(this)
例如,而不是onSubmit={this.\u updateThing}
试试onSubmit={this.\u updateThing.bind(this)}
好的,我找到了原因!
我使用服务器端呈现(React.renderToString)来呈现组件的HTML。
因此,只呈现组件,而不装载组件,因此不会调用与装载相关的任何方法
详情:
您的其他事件处理程序是否正常工作?onChange方法(\u setChangedText)在my react.js、getInitialState方法worked.hi、Damon中也没有激发。谢谢你的回答。我试过你说的话,但没什么变化。我还使用chrome开发控制台进行了检查,html源代码中没有显示onSubmit方法。添加绑定方法后会出现警告消息:warning:bind():您正在将组件方法绑定到组件。React以高性能方式自动为您执行此操作,因此您可以安全地删除此呼叫。嘿@Ryu。它能解决你的问题吗?如果是这样的话,我们有一个有趣的难题,不是吗?还是没有,是的,我们有一个难题。很高兴你解决了!非常感谢你。