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

Posted 2023-02-22

【中文标题】如何在 KeyDown 事件的子组件中调用父组件中定义的函数？

【英文标题】：How to call function defined in parent component in child component on KeyDown event?

【发布时间】：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。 请让我知道如何实现这一目标。 提前致谢！

【参考方案1】：

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

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

【讨论】：

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