如果我在输入上有 onBlur 处理程序，则不会调用表单上的 React onSubmit 处理程序?(仅在使用Webs

React onSubmit handler on a form won't be called if I have a onBlur handler on an input? (Only happens when using Webstorm js debugger)

本文关键字：程序 处理 onSubmit React Webs 表单 输入 onBlur 如果 调用      更新时间：2023-09-26

我的代码的简化版本。如果我单独单击提交按钮，则会调用 onSubmit 处理程序。如果我在编辑输入框后立即单击提交，则不会调用 onSubmit 处理程序。这是 React 的设计方式吗？在这种情况下如何调用提交。

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)

根据达瓦尔的回答，我找到了其中的原因。

当我使用 Webstorm js 调试器时，提交事件不会触发。当我自己使用浏览器时。效果很好。

这太奇怪了，我怀疑我做错了什么。有人可以在网络风暴上尝试一下。

请检查下面提到的 Plunkar 当我单击"共享"按钮时，它将调用提交

    // 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')
);

演示

相关文章：