4. The Problem
HELP!
I have potential for dynamically
added/removed form-fields, but need for
my form component to know whether or
not it can submit.
PS: Also must work in all browsers, be beautiful, easy to use, and done ASAP.
5. Solution: Form Component where Inputs are “Registered”
Submit
Snap-in Form
Text Input Field registerWithForm()
Number Input Field deRegisterFromForm()
Field Container
6. What are React mixins?
Mixins are a way for totally separate
components to have common
functionality...
7. What are React mixins?
Mixins are a way for totally separate
components to have common
functionality...
...and still remain totally separated
even after the mixing is done.
8.
9.
10.
11. Form Component
● inputs
○ empty object placeholder for registered inputs to live
● registerInput(input)
○ takes the input being registered. Inputs are expected to
have a name, as that’s the key in the inputs hash.
● deRegisterInput(name)
○ takes the de-registered input’s name, and deletes that key
from this.inputs
● updateValidity()
○ sets the form’s valid state based on all registered inputs -
fires any time a field is (de)registered.
Even if I bomb out here tonight, I’ll still be loved - my son’s shirt says so.
We want our various input fields to be able to all implement the same common interface in order to keep the form container updated on what’s going on, but we don’t want to have to repeat our code for each one. This is where mixins come into play!
Only the truly common functionality is shared. This is much cleaner than just extending one object by another because you need 3% of the source object’s functionality!
Mixin is just a plain ole javascript object. Within methods, “this” is automatically scoped to the component instance by React. These should be lean - only purely common functionality should go here.
Mixin is just a plain ole javascript object. Within methods, “this” is automatically scoped to the component instance by React. These should be lean - only purely common functionality should go here.
Mixin is just a plain ole javascript object. Within methods, “this” is automatically scoped to the component instance by React. These should be lean - only purely common functionality should go here.
updateValidity - any time a new component is (de)registered, the form needs to re-evaluate its own validity
render - React lifecycle event
clonedChildren is essentially the input container - all inputs render here, but the form itself controls the submit button. Could easily add in some props and some logic to allow any consumer of the form component to control the submit button label, if there’s a cancel button, its label, etc….
clonedChildren is essentially the input container - all inputs render here, but the form itself controls the submit button. Could easily add in some props and some logic to allow any consumer of the form component to control the submit button label, if there’s a cancel button, its label, etc….
This is what will use our mixin. We have to build a component around a standard text input in order to make it part of our React-based environment. The beautiful thing is that we can see at one glance all of the separate items that “mix in” to this class. No guessing, no hunting for an $.extend call that references an instance of this class - it’s clearly defined in one place. 2 more lifecycle events.
