// function.bind(undefined, arg1) // // Create a function with a preset leading argument , more arguments of the function can follow arg1, arg2, ... bind example (bind 'this' for a function)
<!DOCTYPE html> <html> <body> <div id="registration-form"></div> <script src="./app.js"></script> </body> </html> ================= app.js var React = require('react') var Registration = require('./components/Registration') window.onload = function() { React.render( <Registration />, document.getElementById('registration-form') ) } ================= registration-form.js var React = require('react') // each step is a different component var AccountFields = require('./AccountFields') var Confirmation = require('./Confirmation') var Success = require('./Success') var SurveyFields = require('./SurveyFields') var assign = require('object-assign') //component data to be collected in the steps. Idealy, these form values would be saved in another sort of persistence, like a Store via Flux pattern var fieldValues = { name : null, email : null, password : null, age : null, colors : [] } var Registration = React.createClass({ getInitialState: function() { return { step : 1 //step of registeration } }, nextStep: function() { //inc this.setState({ step : this.state.step + 1 }) }, previousStep: function() { //dec this.setState({ step : this.state.step - 1 }) }, saveValues: function(field_value) { //handler to child components to save values of teir step return function() { // Remember, `fieldValues` is set at the top of this file, we are simply appending to and overriding keys in `fieldValues` with the `fields` with Object.assign. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign fieldValues = assign({}, fieldValues, field_value) // Object.assign(target, ...sources) : merges all the source jsons to target }.bind(this)() // function.bind() allows you to set this value for a function }, submitRegistration: function() { // Handle via ajax submitting the user data, upon success return this.nextStop(). If it fails, show the user the error but don't advance this.nextStep() }, showStep: function() { switch (this.state.step) { case 1: return <AccountFields fieldValues={fieldValues} nextStep={this.nextStep} previousStep={this.previousStep} saveValues={this.saveValues} /> case 2: return <SurveyFields fieldValues={fieldValues} nextStep={this.nextStep} previousStep={this.previousStep} saveValues={this.saveValues} /> case 3: return <Confirmation fieldValues={fieldValues} previousStep={this.previousStep} submitRegistration={this.submitRegistration} /> case 4: return <Success fieldValues={fieldValues} /> } }, render: function() { var style = { width : (this.state.step / 4 * 100) + '%' } return ( <main> <span className="progress-step">Step {this.state.step}</span> <progress className="progress" style={style}></progress> //progress bar {this.showStep()} </main> ) } }) module.exports = Registration ================= app.js /** * @jsx React.DOM */
|