我的代码的简化版本。如果我自己单击提交按钮,则会调用 onSubmit 处理程序。 如果我在编辑输入框后立即单击提交,将不会调用 onSubmit 处理程序。 React 就是这样设计的吗?在这种情况下如何调用 onSubmit。
const EmailInput = React.createClass({
handleOnBlur(event){
console.log('onBlur')
},
render(){
return <div className="form-group">
<label htmlFor={this.props.name}>Email</label>
<input className="form-control"
type='text'
name={this.props.name}
onBlur={this.handleOnBlur}
value={this.state.val}
/>
</div>
}
})
const Form = React.createClass({
onSubmit(e){
console.log('onSubmit')
},
render(){
return <form onSubmit={this.onSubmit}>{this.props.children}</form>
}
})
ReactDOM.render(<Form>
<EmailInput />
<button type="submit" className="btn btn-primary" >Share</button>
</Form>, mountNode)
根据Dhaval的回答,我找到了原因。
当我使用 Webstorm js 调试器时,提交事件不会触发。当我只是单独使用浏览器时。结果很好。
这太奇怪了,我怀疑我做错了什么。有人可以在 Webstorm 上试试吗。
最佳答案
请检查下面提到的 Plunkar 当我点击 Share 按钮时它会调用 onSubmit
// Code goes here
var EmailInput = React.createClass({
handleOnBlur(event){
console.log('onBlur')
},
getInitialState:function()
{
return{
val:''
}
},
render(){
return <div className="form-group">
<label htmlFor={this.props.name}>Email</label>
<input className="form-control"
type='text'
name={this.props.name}
onBlur={this.handleOnBlur}
value={this.state.val}
/>
</div>
}
});
var Form = React.createClass({
onSubmit(e){
console.log('onSubmit')
},
render(){
return <form onSubmit={this.onSubmit}>{this.props.children}</form>
}
});
React.render(<Form><EmailInput /><button type="submit" className="btn btn-primary" >Share</button></Form>,
document.getElementById('example')
);
关于javascript - 如果输入上有 onBlur 处理程序,将不会调用表单上的 React onSubmit 处理程序? (仅在使用 Webstorm js 调试器时发生),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34898242/