CODEWITHSUNDEEP
javascriptformseventsreactjsflux
ThomasReggi
ThomasReggi

Reputation: 59365

Centralized function to delegate form onSubmit to Flux Actions

I have a react app with many different forms I'm looking to not have to write the same code over and over for each form, and I'm looking for a simple way to centralize the onSubmit() handlers for all forms. From a central location I can trigger the specific Flux action that will trigger an ajax call.

I'm picturing one function that takes care of all form requests.

function (event) {
  event.preventDefault()
  var $elm = $(event.target)
  var d = {}
  d.method = $elm.attr('method')
  d.action = $elm.attr('action')
  d.data = $elm.serialize()
  console.log(d)
}

From here I can check the action and method and make a switch for each possibility.

Does this make sense within the Flux architecture?

Upvotes: 0

Views: 106

Answers (1)

Prashant Abhishek
Prashant Abhishek

Reputation: 116

You will anyway need to collect data from specific components, so you will have to write individual functions for it, but the rest of task like sending an action can be done in the onSubmit function of a parent component. So delegate all onSubmit events in children components with data to the onSubmit functions of parent component via props.

You can also add an identifier like we do as constants in dispatchers, to identify particular onSubmit event and then in parent component use switch statements to send particular actions based on identifier.

If there's a use case, I guess it makes sense.

Upvotes: 1

Related Questions