React-Bind
Functional reactive 2-way binding.
TL;DR:
import React Component from 'react';import Binder from 'react-bind'; { return <input ="text" = = /> } { ; thisbind = thisbind; } { return <div> <div>Address 1: <TextBox = /></div> <div>Address 2: <TextBox = /></div> <div>City: <TextBox = /></div> <div>State: <TextBox = /></div> <div>Postal: <TextBox = /></div> </div> } { ; thisbinder = this; thisbind = thisbinderbind; thisstate = model: billingAddress: address1: "123 React Blvd" address2: "Unit A" city: "San Reacto" state: "PO" postal: "00123" ; thisbinder; } { return <div> <div> Billing Address:<br /> <Address = /> </div> <div> Shipping Address:<br /> <Address = /> </div> </div> ; }
How does it work?
A component carries a model in state. Child components are bound to the model using a binder. The binder carries a portion of the model and allows for getting and setting of properties. When a property is set on the model, the changes are made on a copy, and delivered to the root component to handle. By default, the behavior is to write the new model to state, overriding the previous state. This way, the root component has full control of the model, and there is no data flowing backwards.
Why two-way binding?
React does many things well, but one thing I've found it does not do well is large forms such as registration forms. One key example is creating a reusable street address control for a form that has two or more addresses such as billing vs. shipping. Traditionally, with the many text fields, you have to write individual handlers for each, and set state on a component that doesn't own the data, or provide events to the parent component so it can set the appropriate state per address. With react-bind, as shown in the example above, you only need to create this function once when rendering a native component. You'll notice the example achieves collecting information about both addresses without any more single-use functions.