CODEWITHSUNDEEP
javascriptjqueryformsreactjssubmit
ThomasReggi
ThomasReggi

Reputation: 59345

Trigger onSubmit event

I have a component with a form where the onSubmit handler is set to this.props.onSubmit.

I'm trying to add some extra functionality to this form, I want it to submit after a pause (1000ms).

I can't seem to submit the form with jquery $inputQuery.trigger('submit') if I just call .onSubmit() the handler won't have the 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)
    })
  },

How can I trigger a onSubmit event on a specific ref with react?

Upvotes: 0

Views: 1128

Answers (1)

ThomasReggi
ThomasReggi

Reputation: 59345

From this github issue I learned that:

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

To simulate / trigger an event use React.addons.TestUtils.Simulate which methods like .click() and .submit() and are supplied a node.

Which changes componentDidMount to this:

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

Just remember to use var React = require('react/addons') with npm to access TestUtils.

Upvotes: 2

Related Questions