How to call function defined in parent component in child component on KeyDown event?

2
votes
var B = React.createClass({
    render: function() {
    return (
        <div>
            <input type="button" onClick={this.props.saveFunction} />        
        </div>
    );
  }
});

var A = React.createClass({
    render: function() {
        return (
            <div>
                <B saveFunction={this.save} />        
            </div>
        );
    },
    save: function(){
        //Save code
    }
});

Hello, I am working in facebook react js. I have created two components wherein A is parent component and B is child component. I have written Save function in A and passing its reference as "props" to component B. I am passing this Save function reference to "onClick" event of button rendered from B and I also want to save the values when user press the ENTER button. So, I am trying to pass the same reference to "onKeyDown" event of same button. But, its not working. Contstraint is: I can't shift save function from A to B. Please let me know how I can achieve this. Thanks in advance!

1
javascriptjqueryreactjsreactjs-flux

1 Answers

2
votes

I you pass this.save function to child element it loses it's context (JavaScript tires to execute save function when keyword this points to B element).

Bind that function with .bind(this) like: <B saveFunction={this.save.bind(this)} />