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

你有两个问题：

绑定handleChange，但忘记在构造函数中绑定handleKey。

最好是不使用手动绑定，而是使用箭头功能。

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

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

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

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

Answer 2

只是改变这个：

 onChange={this.handleChange}
 onKeyUp={this.handleKey}

到

 onChange={this.handleChange = this.handleChange.bind(this)}
 onKeyUp={this.handleKey = this.handleKey.bind(this)}`

Answer 3

你必须将sudo shutdown.sh函数添加到类的上下文中。

bind

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

3 个答案: