Skip to content Skip to sidebar Skip to footer

React.js Passing => In Props

Follow up on this question but deserved a separate thread Trying to convert React.CreateClass to extends React.Component. I'm wondering how I can make use of => while calling th

Solution 1:

Just pass an argument to the function.

<FormFields unamepwd={this.state} 
    handleChange={(fieldName) => self.handleChange(fieldName)} updateChanges={self.updateToServer} />

and call it like:

this.props.handleChange('password') 

Solution 2:

You can use e.target in the function handling onChange event to get a reference to the input that has triggered the event. So you only pass a reference to the handleChange function arround, no need for {x => handleChange('name') } or { handleChange.bind('name') } or whatever.

varFormFields = React.createClass({
    render: function() {
        const upwd = this.props.unamepwd;
        return(
            <form>
              Username: <inputvalue={upwd.username}onChange={this.props.handleChange}name="username" /><br />
              Password: <inputtype="password"value={upwd.password}onChange={this.props.handleChange}name="password" /><buttononClick={this.props.updateChanges}>Go!</button></form>
        );
    }
});

varParent = React.createClass({
    handleChange(e){
        console.log( e.target.name );
    },
    render(){
        return<FormFieldshandleChange={this.handleChange }  />
    }
});

http://jsfiddle.net/mg5cbepk/

Post a Comment for "React.js Passing => In Props"