I have some weird glitch on submitting the form with some field is empty. this is the code:
...
constructor(props) {
super(props);
this.state = {
form: {
email: '',
password: '',
retype: ''
}
};
},
_updateTextbox(type, ev) {
var oldState = this.state;
var newFormState = Object.assign({}, this.state.form, {
[type]: ev.target.value
});
this.setState(Object.assign({}, this.state, {
form: newFormState
}));
}
_submit(ev) {
alert('Submit!');
ev.preventDefault();
},
render (){
return (
<form onSubmit={this._submit.bind(this)}>
<input type="email" onChange={this._updateTextbox.bind(this, 'email')} value={this.state.form.email} />
<input type="password" onChange={this._updateTextbox.bind(this, 'password')} value={this.state.form.password} />
<input type="password" onChange={this._updateTextbox.bind(this, 'retype')} value={this.state.form.retype} />
<button type="submit">Submit</button>
</form>
);
}
...
if I try to submit this form with all empty fields, it works. but if I type only email field, the form never submit whatever other fields empty or not. you can see that I used to alert on submit the event, but it never pops up. I don't know why it is happening. is this some kind of glitch?
It seems that you got an error ev.preventDefault(); }, <<<< the comma
edit complete code
import React, { Component } from 'react'
class Example extends Component {
constructor(props) {
super(props);
this.state = {
form: {
email: '',
password: '',
retype: ''
}
};
}
_updateTextbox(type, ev) {
var newFormState = Object.assign({}, this.state.form, {
[type]: ev.target.value
});
this.setState(Object.assign({}, this.state, {
form: newFormState
}));
}
_submit(ev) {
alert('Submit!');
ev.preventDefault();
}
render (){
return (
<form onSubmit={this._submit.bind(this)}>
<input type="email" onChange={this._updateTextbox.bind(this, 'email')} value={this.state.form.email} />
<input type="password" onChange={this._updateTextbox.bind(this, 'password')} value={this.state.form.password} />
<input type="password" onChange={this._updateTextbox.bind(this, 'retype')} value={this.state.form.retype} />
<button type="submit">Submit</button>
</form>
);
}
}
export default Example
see the capture
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.