CODEWITHSUNDEEP
javascriptcoffeescriptreactjs
Alex Antonov
Alex Antonov

Reputation: 15206

ReactJS onSubmit on form doesn't work

I have a mystery trouble: when I clicking to the button or press enter, nothing is happen.

Row = ReactBootstrap.Row
Col = ReactBootstrap.Col
Input = ReactBootstrap.Input
Button = ReactBootstrap.Button

@NewSession = React.createClass
  handleSubmit: (e) ->
    alert 'f'
    e.preventDefault()
    Dispatcher.query('sessions', {}, 'POST')
  render: ->
    <form onSubmit={@handleSubmit} noValidate>
      <Row>
        <Col md={6} mdOffset={3} className='text-center'>
          <Input type='text' placeholder='Your username' ref='login' />
          <Input type='text' placeholder='Your password' ref='password' />
          <Button bsStyle='success'>Sign in</Button>
        </Col>
      </Row>
    </form>

What is the reason of this strange behavior? Why handleSubmit doesn't work?

UPDATED

If I place onClick={@handleSubmit} handler on button, clicking is works

Upvotes: 2

Views: 7593

Answers (2)

Jonny Buchanan
Jonny Buchanan

Reputation: 62813

react-bootstrap Button components default to type="button", so you need to add type="submit" to create a submit button.

<Button type='submit' bsStyle='success'>Sign in</Button>

Upvotes: 2

Jo&#227;o Lima
Jo&#227;o Lima

Reputation: 430

You don't have any submit event... You need to declare a type=submit inside the render method. Then you can use your onSubmit event handler function. Example below:

   <form onSubmit={this.handleSubmit.bind(this)}>
		<div className="form-group col-sm-7">
          <input type="text" className="form-control" ref="inputmessage" id="inputDefault" />
		</div>
	  <div className="form-group col-sm-5">
		<button type="submit" className="btn btn-block btn-primary">Send Message </button>
		</div>
  </form>

Upvotes: 1

Related Questions