如何在 KeyDown 事件的子组件中调用父组件中定义的函数？答案

【问题标题】：How to call function defined in parent component in child component on KeyDown event?如何在 KeyDown 事件的子组件中调用父组件中定义的函数？
【发布时间】：2016-03-07 18:05:27
【问题描述】：

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
    }
});

你好，我在 facebook react js 工作。我创建了两个组件，其中 A 是父组件，B 是子组件。我在 A 中编写了 Save 函数，并将其引用作为“props”传递给组件 B。我将此保存函数引用传递给从 B 呈现的按钮的“onClick”事件，并且我还想在用户按下 ENTER 按钮时保存这些值。所以，我试图将相同的引用传递给同一按钮的“onKeyDown”事件。但是，它不起作用。约束是：我不能将保存功能从 A 转移到 B。请让我知道如何实现这一目标。提前致谢！

【问题讨论】：

标签： javascript jquery reactjs reactjs-flux

【解决方案1】：

如果你将this.save 函数传递给子元素，它会丢失它的上下文（当关键字this 指向B 元素时，JavaScript 会厌倦执行save 函数）。

将该函数与.bind(this) 绑定，例如： <B saveFunction={this.save.bind(this)} />

【讨论】：

嗨，鼠标点击（onClick 事件）它工作正常。我的要求是，当我点击“ENTER”键时，我想调用父组件中定义的函数。