reactjs mixins
TRANSCRIPT
The Public PartsEmployer: Unicon, IncRole: Sr. UI Developer
Blog: blog.bradleygore.comFamily: Carolina & Garrison
About Me
Mixin’ It UpWith React Mixins -Bradley Gore
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.
Solution: Form Component where Inputs are “Registered”
Submit
Snap-in Form
Text Input Field registerWithForm()
Number Input Field deRegisterFromForm()
Field Container
What are React mixins?Mixins are a way for totally separate components to have common functionality...
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.
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.
Pass props to child elements during render
Pass props to child elements during render
Pass props to child elements during render
Simple Input Component
Putting Together All The Things
Thank You!
Slides: http://goo.gl/QI7p2aDemo: http://goo.gl/xD8yQ4
Email: [email protected]: @dotNetKnight