javascript - 如何使用 "Enter"按钮将 State 设置为我的组件

Question

我是ReactJs Es6的真正初学者，当我点击“Enter”按钮时，我试图将State设置为我的组件，我已经尝试了这里的一些答案，例如这个，https://stackoverflow.com/a/34634290/8301413 ，但它并没有按照我想要的方式工作。

到目前为止，当我在输入框中输入文本时，<h1>更改其状态并显示每个字符输入的状态。我想要发生的是，我首先输入文本，然后当我按回车键时，这是状态更新并显示输入框中文本的唯一时间。

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

export class App extends Component {
  constructor(props) {
    super(props);

    this.state = { userInput: '' };
    this.handleUserInput = this.handleUserInput.bind(this);
  }

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

  render() {
    return (
       <div>    
          <input 
           type="text" 
           value={this.state.userInput}
           onChange={this.handleUserInput}
           />
          <h1>{this.state.userInput}</h1>
       </div>      
     );
  }
}

export default App;

Answer 1

要实现该行为，请使用 uncontrolled component ，表示不使用输入元素的 value 属性。不要使用 onChange 事件，而是使用 onKeyDown 并检查 keyCode，仅当用户按下 Enter 键时更新状态。

检查这个工作片段:

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = { userInput: '' };
    this.handleUserInput = this.handleUserInput.bind(this);
  }

  handleUserInput(e) {
    if(e.keyCode == 13)
        this.setState({userInput: e.target.value});
  }

  render() {
    return (
       <div>    
          <input 
             type="text" 
             onKeyDown={this.handleUserInput}
          />
          <h1>{this.state.userInput}</h1>
       </div>      
     );
  }
}

ReactDOM.render(<App/>, document.getElementById('app'))

<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='app'//>