[英]form is not submitting when some field is empty on using react
我提交表单时有一些奇怪的故障,一些字段是空的。 这是代码:
...
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>
);
}
...
如果我尝试使用所有空字段提交此表单,则可以正常工作。 但如果我只键入电子邮件字段,表单永远不会提交任何其他字段为空。 你可以看到我曾经提醒事件提醒,但它永远不会弹出。 我不知道为什么会这样。 这是一种小故障吗?
看来你有一个错误ev.preventDefault(); },<<<<逗号
编辑完整的代码
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
看到捕获
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.