React，无法从onKeyPress输入事件获取event.key

Question

我无法从输入onKeyPress事件获取event.key，当我输入输入字段时出现此错误 - TypeError：无法读取未定义的属性'key'

计划是在子输入组件中按下enter时更新父状态。

class ToDoList extends Component {
  constructor(props) {
    super(props);
    this.handleKeyPress = this.handleKeyPress.bind(this);
    this.state = {
      todoArr: [],
    };
  }

  handleKeyPress(e){
    console.log(e.key);
  }

  render(){
    return(
        <div className="wrapper">
          <p className = "title">todos</p>
          <InputField testProp={this.handleKeyPress}></InputField>
          <div className = "filter-wrap">
            <ItemsLeft></ItemsLeft>
            <Filter></Filter>
            <ClearCompleted></ClearCompleted>
          </div>
        </div>
      )
  }
}

class InputField extends Component {
  render(){
    return(
        <input type="text" className="input-field" onKeyPress = {()=> this.props.testProp()}/>
      )
  }
}

Answer 1

如果您希望以这种方式传递这样的参数() => this.props.testProp()

，您可以通过(e) => this.props.testProp(e)来破坏孩子们的代码

我就是这样做的

class ToDoList extends Component {
  constructor(props) {
    super(props);
    this.handleKeyPress = this.handleKeyPress.bind(this);
    this.state = {
      todoArr: []
    };
  }

  handleKeyPress(e) {
    console.log(e.key);
  }

  render() {
    return (
      <div className="wrapper">
        <p className="title">todos</p>
        <InputField testProp={this.handleKeyPress} />
      </div>
    );
  }
}

class InputField extends Component {
  render() {
    return (
      <input
        type="text"
        className="input-field"
        onKeyPress={this.props.testProp}
      />
    );
  }
}

你可以在这里测试:) https://codesandbox.io/s/6n2jp8yzy3

如果你想看到控制台，你左边有一个按钮可以打开它。

通过这样做，回调接收输入提供的所有参数，因此您不需要自己编写它。