Question

我是ReactJs Es6的真正初学者，当我点击＆＃34; Enter＆＃34;我试图将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，表示不使用input元素的value属性。而不是使用onChange事件使用onKeyDown并检查keyCode，只有当用户按下回车键时才更新状态。

检查此工作代码段：

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

Answer 2

@Mayank Shukla的答案可能是正确的，但它会将其更改为不受控制的组件。

Demo

您只需要添加更多等待“Enter”键的事件onKeyPress。

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

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

  handleUserInput(e) {
    if (e.key === 'Enter') {
        this.setState({output: e.target.value});
    }
  }

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

  render() {
    return (
       <div>    
          <input 
           type="text" 
           value={this.state.userInput}
           onKeyPress={this.handleUserInput} // Only for "Enter" purpose
           onChange={this.handleChange}
           />
          <h1>{this.state.output}</h1>
       </div>      
     );
  }
}

这样你仍然可以控制组件。

Example of Controlled Component objective

我怎样才能使用＆＃34;输入＆＃34;按钮将setState设置为我的组件

2 个答案: