javascript - 在 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. 您绑定(bind)了 handleChange，但忘记在构造函数中绑定(bind) handleKey。

最好不要使用手动绑定(bind)，而是使用箭头函数。

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

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

第二个问题是如何知道“enter”键被按下。使用

 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" />