reactjsjsxformsy-react

Get an inputs component props onBlur


Is it possible to get the props of an input with the onBlur event?

With event.target.value I get the value of my input.

Is it possible to get the props of the component a similar way?


Solution

  • Sure you can, here is a fiddle:

    var Hello = React.createClass({
        onBlur: function (e) {
            console.log(this.props);
        },
        render: function () {
            return (
                <div>
                    <input onBlur={this.onBlur} />
                </div>
            );
        },
    });
    

    Or if you receive function from parent as a property, you should bind it to the components context.

    Fiddle example:

    var Hello = React.createClass({
        render: function () {
            return (
                <div>
                    <input onBlur={this.props.onBlur.bind(this)} />
                </div>
            );
        },
    });
    
    function onBlur(e) {
        console.log(this.props);
        console.log(e);
    }
    
    ReactDOM.render(
        <Hello onBlur={onBlur} name="World" />,
        document.getElementById("container")
    );