触发 onSubmit 事件

Question

我有一个带有 form 的组件，其中 onSubmit 处理程序设置为 this.props.onSubmit。

我正在尝试向此表单添加一些额外的功能，我希望它在暂停（1000 毫秒）后提交。

如果我只是调用 .onSubmit()，我似乎无法使用 jquery $inputQuery.trigger('submit') 提交表单，处理程序将没有 event。

  componentDidMount: function () {
    console.log('hi')
    var _this = this
    var dn = React.findDOMNode(this.refs.inputQuery)
    var $inputQuery = $(dn)
    $inputQuery.on('keyup', function () {
      console.log('bo')
      delay(function () {
        console.log('boook')
        // $inputQuery.trigger('submit') // doesn't work
        // $inputQuery.submit() // doesn't work
        _this.props.onSubmit()
      }, 1000)
    })
  },

如何使用 React 在特定 ref 上触发 onSubmit 事件？

Answer 1

从 this github issue 我了解到：

...jQuery doesn't trigger a real DOM event, but tries to find callbacks in its own internal event map... — bloodyowl

要模拟/触发事件，请使用 React.addons.TestUtils.Simulate 方法，例如 .click() 和 .submit()，并提供 node.

将 componentDidMount 更改为：

function () {
  var time = this.props.fireSubmitOnEntry
  if (this.props.fireSubmitOnEntry) {
    var inputNode = React.findDOMNode(this.refs.inputQuery)
    var formNode = React.findDOMNode(this.refs.form)
    var $input = $(inputNode)
    $input.on('keyup', function (e) {
      var code = e.which
      if (code === 13) return false
      delay(function () {
        React.addons.TestUtils.Simulate.submit(formNode)
      }, time)
    })
  }
}

请记住使用 var React = require('react/addons') 和 npm 来访问 TestUtils。

触发 onSubmit 事件

Trigger onSubmit event

javascript

forms

jquery

submit

reactjs