当某些字段在使用react时为空时，表单不提交

Question

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?

Answer 1

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