时间戳

首页 > 解决方案 > REACTjs 在输入时捕获输入框数据

javascript - REACTjs 在输入时捕获输入框数据

问题描述

单击回车键后，我试图在文本框中捕获值。我通常使用 onChange 但这不是我想要的。在下面的代码中，我尝试使用 onKeydown 但是当我尝试在文本框中输入时，什么也没有发生。这是我的代码：

class App extends React.Component{
  constructor(){
    super()
    this.state = {
      name:'',
      show:false
    }
    this.handleKeyDown = this.handleKeyDown.bind(this)
  }
  
  handleKeyDown(e) {
    if (e.key === 'Enter') {
      this.setState({
        name:e.target.value
      })
    }
  }
  
  render(){
    return(
      <div>
        <span>What is your name? </span>
        <input type="text" name="fullName" value={this.state.name} onKeyDown={this.handleKeyDown} /> 
        {this.state.show && <div>Hello {this.state.name}</div>}
      </div>
    )
  }
}

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

这是我的代码笔 任何帮助将不胜感激。谢谢！

标签： javascriptreactjs

解决方案

您必须在输入更改时更新状态，然后在按下回车键时对值执行某些操作。

class App extends React.Component{
  constructor(){
    super()
    this.state = {
      name: '',
      show:false
    }
    this.handleKeyDown = this.handleKeyDown.bind(this)
  }
  
  handleKeyDown(e) {
    if (e.key === 'Enter') {
      alert(this.state.name)
    }
  }
  
  render(){
    return(
      <div>
        <span>What is your name? </span>
        <input type="text" name="fullName" onChange={e=>this.setState({ name: e.target.value })} value={this.state.name} onKeyDown={this.handleKeyDown} /> 
        {this.state.show && <div>Hello {this.state.name}</div>}
      </div>
    )
  }
}

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

推荐阅读