PureRenderMixin and Public Administration Design

Question

I have a top-level component ( RegisrationPage) with the condition that it is transmitted status / details to reset the lower-level components ( InputField, Dropdown, Datepicker). Lower-level components change state RegistrationPageusing callbacks.

Problem: PureRenderMixin does not work, since I need to bind a state change call that is passed to lower-level components.

Question: how to make it PureRenderMixinwork in the most elegant way?

Explain this with code:

InputBlock:

const React = require('react'),
      PureRenderMixin = require('react-addons-pure-render-mixin');

module.exports =  React.createClass({
    mixins: [PureRenderMixin],

    propTypes: {
        input: React.PropTypes.string,
        onChange: React.PropTypes.func
    },

    render() {
        //PROBLEM - is re-rendered each time , since onChange callback each time is an different object due bind method call
    }

});

RegistrationPage:

RegistrationPage = React.createClass({  

    /**
     * Since all state is held by `RegistrationPage` and bottom-level components are dump,
     * I do _onFieldChange.bind - _onFieldChange should know which field should be changed
     */
    render() {
        return CreateFragment({
            email: <InputBlock
                input={this.state.email}
                onChange={this._onFieldChange.bind(self, 'email')}/>,
            firstName: <InputBlock
                input={this.state.firstName}
                onChange={this._onFieldChange.bind(self, 'firstName')}/>,
            .........
        });
    },

    _onFieldChange(key, event) {
        //Save registered progress to store and re-render the component
        AppActionCreators.saveRegisterProgress(this.state);
    }
})

---

My workaround: just pass inputFieldNameas an extra property and bind it to the lower level component.

Answer 1

.bind() , . , . :

    RegistrationPage = React.createClass({  
        render() {
            return CreateFragment({
                email: <InputBlock
                    input={this.state.email}
                    onChange={this._onEmailChange}/>,
                firstName: <InputBlock
                    input={this.state.firstName}
                    onChange={this._onFirstNameChange}/>,
                .........
            });
        },

        _onFieldChange(key, event) {
            //Save registered progress to store and re-render the component
            AppActionCreators.saveRegisterProgress(this.state);
        }

        _onEmailChange() {
            this._onFieldChange('email')
        }

        _onFirstNameChange() {
            this._onFieldChange('firstName')
        }
    })