React中按下回车键捕获输入框数据的问题求助

你遇到的核心问题是：你的输入框是受控组件，但缺少了实时更新state的逻辑。

因为你把输入框的value绑定到了this.state.name，但只有在按下回车时才会更新这个state值——平时输入字符的时候，没有任何代码去同步输入框的内容到state里，所以输入框的内容永远停留在初始的空字符串，自然没法输入。

修复方案 #

我们需要做两个调整：

1. 添加一个onChange事件处理函数，实时把输入框的内容同步到state中，这样输入框才能正常输入；
2. 让onKeyDown只负责处理回车事件的业务逻辑（比如触发问候语显示），而不是用来更新输入框的内容。

完整修复后的代码 #

class App extends React.Component{
  constructor(){
    super()
    this.state = {
      name:'',
      show:false
    }
    this.handleKeyDown = this.handleKeyDown.bind(this)
    this.handleChange = this.handleChange.bind(this) // 新增方法绑定
  }
  
  handleChange(e) {
    // 实时同步输入框内容到state，保证输入框可编辑
    this.setState({ name: e.target.value })
  }
  
  handleKeyDown(e) {
    if (e.key === 'Enter') {
      // 回车时触发问候语显示的逻辑
      this.setState({ show: true })
    }
  }
  
  render(){
    return(
      <div>
        <span>What is your name? </span>
        <input 
          type="text" 
          name="fullName" 
          value={this.state.name} 
          onChange={this.handleChange} // 新增onChange事件绑定
          onKeyDown={this.handleKeyDown} 
        />
        {this.state.show && <div>Hello {this.state.name}</div>}
      </div>
    )
  }
}

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

为什么这样可行？ #

• onChange会在输入框内容每发生一次变化时触发，实时更新state.name，让受控输入框的内容和state保持同步，这样你就能正常输入内容了；
• onKeyDown只在按下回车时执行，负责切换show状态，从而触发问候语的显示，完美实现了你“按下回车时捕获输入值并触发后续操作”的需求。

内容的提问来源于stack exchange，提问作者OLA