Question

我正在尝试创建一个基于插入的文本更新组件的网页。当用户点击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>
    );
  }
}

这是父母。我最终希望它在我点击Enter或tab时改变这个组件的状态。 updateNames作为prop传递给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>
        );
    }
}

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

我尝试了很多不同的东西让它正常工作但无济于事。如何正确地执行此操作，我可以传递参数，但仍然引用函数绑定到的组件？

Answer 1

在 NameSelector 组件中，尝试传递事件对象：

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

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

1 个答案: