在React中按Enter键时获取文本输入的状态

Question

我正在采取React的第一步,我在设置和获取input元素的状态方面很困难.

• 应用程序将呈现一个没有提交按钮的简单input元素.
• 按下Enter文本字段的当前值时,应写入控制台.

到目前为止,我已经添加了两个事件处理程序onKeyUp(检查是否Enter被按下),另一个用于onChange输出文本字段的值.

这是我目前的代码:

import React, { Component } from "react";
import ReactDOM from "react-dom";

class Terminal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ""};
    this.handleChange = this.handleChange.bind(this);    
  }

  handleKey(e) {
    if (e.key === "Enter") {
      console.log("Enter key pressed");
      console.log(this.state.value);
    }
  }

  handleChange(e) {
    this.setState({value: e.target.value});
  }

  render() {
    return (
      <div>
        <span>My Prompt: > </span>
        <input type="text" value={this.state.value} onKeyUp={this.handleKey} onChange={this.handleChange} />
      </div>
    );
  }  
}    

ReactDOM.render(
  <Terminal />,
  document.getElementById("root")
);

按下即可Enter识别,但登录到控制台会给我:

Uncaught TypeError: Cannot read property 'state' of undefined
    at handleKey (index.js:24)

我在这里错过了什么？

Answer 1

你有2个问题:

1. 你绑定handleChange但你忘了绑定handleKey在构造函数中.

更好的是不使用手动绑定,而是使用箭头功能.

  handleKey = (e)  => {
   //....... ( See second issue )
  }

  handleChange = (e) => {
    this.setState({value: e.target.value});
  }

2. 第二个问题是如何知道按下"输入"键.使用

    const keyCode = e.keyCode || e.which;
    if (keyCode === 13) {
      // You code when "Enter" is pressed
    }
   

下面的演示应该可以正常工作.

    class Terminal extends React.Component {
      // no need explicit constructor !
      state = { value: '', cmds: [] };

      handleKey = e => {
        const keyCode = event.keyCode || event.which;
        if (keyCode === 13) {
          this.setState(({ cmds, value }) => ({
            value: '',
            cmds: [value, ...cmds]
          }));
        }
      };

      handleChange = e => {
        this.setState({ value: e.target.value });
      };

      render() {
        return (
          <div>
            <div>
              <span>My Prompt: > </span>
              <input
                type="text"
                value={this.state.value}
                onKeyUp={this.handleKey}
                onChange={this.handleChange}
              />
            </div>
            {this.state.cmds.map(cmd =>
              <div>
                {cmd}
              </div>
            )}
          </div>
        );
      }
    }

    ReactDOM.render(<Terminal />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root" />