ReactJS Mixins
Download as PPTX, PDF2 likes725 views
The document discusses using React mixins to allow for dynamic form fields that can register and deregister with a parent form component. The author is having issues with a form where fields can be dynamically added and removed, but the form needs to know if it can be submitted. React mixins are proposed as a solution to allow components to share common functionality while remaining separate. The solution involves a form component that registers input fields in an object, and can deregister them. It also checks validity when fields register/deregister. Input components can register and deregister themselves from the form.
ReactJS Mixins
- 1. The Public Parts Employer: Unicon, Inc Role: Sr. UI Developer Blog: blog.bradleygore.com Family: Carolina & Garrison About Me
- 3. Mixin’ It Up With React Mixins -Bradley Gore
- 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.
- 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.
- 12. Pass props to child elements during render
- 13. Pass props to child elements during render
- 14. Pass props to child elements during render
- 16. Putting Together All The Things
- 17. Thank You! Slides: http://goo.gl/QI7p2a Demo: http://goo.gl/xD8yQ4 Email: bradleyd60@gmail.com Twitter: @dotNetKnight
Editor's Notes
- #2: Even if I bomb out here tonight, I’ll still be loved - my son’s shirt says so.
- #6: 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!
- #8: 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!
- #9: 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.
- #10: 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.
- #11: 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.
- #12: updateValidity - any time a new component is (de)registered, the form needs to re-evaluate its own validity
- #13: render - React lifecycle event
- #14: 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….
- #15: 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….
- #16: 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.