表单上的 ReactJS onSubmit 不起作用答案

【问题标题】：ReactJS onSubmit on form doesn't work表单上的 ReactJS onSubmit 不起作用
【发布时间】：2015-11-11 12:59:25
【问题描述】：

我有一个神秘的问题：当我点击按钮或按回车时，什么都没有发生。

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>

这种奇怪行为的原因是什么？为什么handleSubmit 不起作用？

更新

如果我将onClick={@handleSubmit} 处理程序放在按钮上，点击就可以了

【问题讨论】：

你试过在handleSubmit函数中记录一些东西吗？
是的，我已经编辑了这个问题。 console.log 和 'alert' 都不能给我任何东西
试试这个{this.handleSubmit} 而不是{@handleSubmit}。看看有没有帮助。
完全相同
奇怪。在我看来还可以。 console 窗口中是否有任何错误？

标签： javascript coffeescript reactjs

【解决方案1】：

react-bootstrap Button components default to type="button"，所以需要添加type="submit" 来创建提交按钮。

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

【讨论】：

【解决方案2】：

您没有任何提交事件...您需要在渲染方法中声明 type=submit 。然后你可以使用你的 onSubmit 事件处理函数。示例如下：

   <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>

【讨论】：