form onSubmit method do not work in react.js

Question

The form onSubmit method(_updateThing) is not fired in my react.js app.
The source code is like the following.
I think the problem is easy, but I spend lots of time to check it , can't solve it.Please help me.
what is wrong with my code:

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

I changed "form onSubmit={this._updateThing}" into "form onSubmit={this._updateThing.bind(this)}", but nothing changed.
I also using Chrome dev console to check html source,onSubmit method(_updateThing) is not shown in the html source.
Capture
Thanks in advances.

onChange method(_setChangedText) is also not fired in my react.js ,getInitialState method worked. — Ryu
– Ryu, Commented Jul 14, 2016 at 4:30

Damon · Accepted Answer · 2016-07-14 05:30:46Z

1

The problem is that the context of this is not being preserved. If you are using React.createClass, this is automatically bound (source) which may throw you for a loop if you are a React dev moving to ES6 classes. With ES6 class constructor syntax, this is not the case and you must bind your own methods when appropriate. The most common way of doing this would be to bind(this) within your JSX.

For example, instead of
onSubmit={this._updateThing}

try
onSubmit={this._updateThing.bind(this)}

answered Jul 14, 2016 at 5:30

Damon

4,3562 gold badges19 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ryu Over a year ago

hi, Damon. Thank you for answer.I tried what you said, but nothing change. I also checked using chrome dev console, onSubmit method is not shown in the html source.

Ryu Over a year ago

There is warning message after adding the bind method:Warning: bind(): You are binding a component method to the component. React does this for you automatically in a high-performance way, so you can safely remove this call.

Damon Over a year ago

Hey @Ryu. Does it fix your problem? If so we have an interesting conundrum don't we.

Ryu Over a year ago

Still not, yeah we have an conundrum.

Ryu · Accepted Answer · 2016-07-15 08:32:58Z

OKay,I found the reason! I am using server side rendering(React.renderToString) to render the HTML for the component. So the component is only rendered, but not mounted, so any methods related to mounting are not called.

Detail: https://facebook.github.io/react/docs/top-level-api.html#reactdomserver.rendertostring

Collectives™ on Stack Overflow

form onSubmit method do not work in react.js

2 Answers 2

4 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Related