Question

React，从 onKeyPress 输入事件获取 event.key 时遇到问题

2018-05-21

66

javascript reactjs

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

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

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

如果您想查看控制台，左下角有一个按钮可以打开它。

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