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: bradleyd60@gmail.comTwitter: @dotNetKnight