a HOC for data-binding an input to a model-it can be a POJO or a mobx observable
npm install react-bounda react utility component for binding inputs to a model. Model can be a POJO or a mobx observable.
It does the same thing as https://facebook.github.io/react/docs/two-way-binding-helpers.html. Links the value from your model to your inputs so that you don't have to wire up every single input manually.
With react-bound you can forget what property of an event.target carries the actual value. No matter if it's a checkbox, radio or a file input. All of the DOM api quirks are hardcoded in react-bound and you get the actual values laid out into your model.
``
input
textarea
select
`
text
url
search
checkbox
radio
password
color
email
date
time
file
datetime-local
number
Currently you get an object available for your children callback with these props:
- dirty boolean flag indicating if any of the bound inputs had any change eventreset
- this function reverts your state object to the state it was in when rendered firstset
- this function sets a property on your state to the supplied value and changes dirty from false to true
Also inspired by angular form controller I want to add support for validation to be able to indicate valid and invalid on the whole state object.
Main motivation is to avoid handling raw events for each input. Having a saves quite a bit of code. This approach violates the often touted one-way data flow-the great react.js strength, but I don't really care. It works well enough for all the forms I've created with it so far.
To run a showcase, use: npm run showcase
You can bound a single input:
`javascript`
Or a whole form:
`javascript
const state = observable({
first: '',
second: '',
})
// in render