Javascript 如何创建onKeyPress事件并将参数传递给事件处理程序函数？

我正在尝试创建一个网页，根据插入的文本更新组件。我需要它在用户点击enter或tab时更新组件。我在父组件中创建一个函数来处理事件，然后将其作为“onKeyDown”事件传递给子组件。我希望这个函数接受三个参数，组件检查键，然后两个参数更改父级的状态。以下是我的一些代码片段：

class CardMaker extends React.Component {
  constructor (props, context){
    super(props, context);

    this.state={
        backColor: "#FFE4C4",
        toName: "Jane Doe",
        fromName: "John Doe",
        foreColor:"white"
    };

    this.updateNames = this.updateNames.bind(this);
  }

   updateNames(e, to, from ){
    alert(e.key)
    if(e.key =="Enter" || e.key =="Tab"){
        this.setState({
            toName: to,
            fromName: from
        });
        alert("update started");
    }

  }

  render() {

    var containerStyle = {
      display:"flex",
      justifyContent: "space-around",
      flexWrap: "wrap"
    };

    var headerStyle = {
      textAlign: "center"
    };


    return(
        <div>
            <h1 style={headerStyle}> Card Creator </h1>
            <div style={containerStyle}>
                <CardSelector backColor= {this.state.backColor} toName={this.state.toName} fromName={this.state.fromName} foreColor = {this.state.foreColor} backgroundClick = {this.updateBackground} foregroundClick = {this.updateForeground} keyPress={this.updateNames}/>
            </div>
        </div>
    );
  }
}

class CardMaker扩展了React.Component{
构造函数（道具、上下文）{
超级（道具、背景）；
这个州={
背景色：“FFE4C4”，
名字：“简·多伊”，
fromName:“John Doe”，
前景色：“白色”
};
this.updateNames=this.updateNames.bind（this）；
}
更新名称（e、to、from）{
警报（e.key）
如果（e.key==“输入”| | e.key==“制表符”）{
这是我的国家({
托纳姆：到，
fromName:from
});
警报（“更新已启动”）；
}
}
render（）{
变量容器样式={
显示：“flex”，
为内容辩护：“周围的空间”，
柔性包装：“包装”
};
变量头样式={
textAlign：“居中”
};
返回(
卡片创建者
);
}
}

这是家长。最终，当我点击enter或tab时，我希望它改变这个组件的状态。updateNames作为道具传递到cardSelector组件

class CardSelector extends React.Component {

    render() {
        var buttonSpaceStyle = {
          width: 400,
          backgroundColor: "#d8d8d8" ,
          borderStyle: "solid",     
          borderWidth: "3px",
          display:"flex",
          justifyContent: "space-around",
          flexDirection: "column",
          padding: "10px"
        };

        return(
            <div style={buttonSpaceStyle}>
                <NameSelector {...this.props}/>

        );
    }
}

class NameSelector extends React.Component {

    render() {
        var nameStyle = {

        };

        return(
            <div style={nameStyle}>
                To: 
                <input onKeyDown={()=>this.props.keyPress(this, "thing","thing")}  type="text" name="to_name" placeholder={this.props.toName}/>

            </div>
        );
    }
}

class-CardSelector扩展了React.Component{
render（）{
变量buttonSpaceStyle={
宽度：400，
背景色：“d8d8d8”，
边框样式：“实心”，
边框宽度：“3px”，
显示：“flex”，
为内容辩护：“周围的空间”，
flexDirection:“列”，
填充：“10px”
};
返回(
);
}
}
类名称选择器扩展了React.Component{
render（）{
变量名称样式={
};
返回(
致：
this.props.keyPress（this，“thing”，“thing”）}type=“text”name=“to_name”占位符={this.props.toName}/>
);
}
}

卡片选择器有一个名为名称选择器的组件，它最终将函数作为道具传递。该函数在事件发生时被调用，但是我正在努力检查密钥状态。我试图传递“this”，以便检查正在按下的键，但事件处理程序中始终未定义e

---

我尝试了很多不同的方法来让它正常工作，但都没有用。在可以传递参数但仍然引用函数绑定到的组件的情况下，如何正确执行此操作？

在名称选择器组件中，尝试传递事件对象：

<input
  onKeyDown={(e) => this.props.keyPress(e, "thing", "thing")} 
  type="text"
  name="to_name"
  placeholder={this.props.toName}
/>

this.props.keyPress（e，“thing”，“thing”）}
type=“text”
name=“to_name”
占位符={this.props.toName}
/>