React按键修改input框中的值

最新推荐文章于 2025-08-30 13:46:55 发布

原创最新推荐文章于 2025-08-30 13:46:55 发布 · 2.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react

react 专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了在React应用中如何通过按键事件实时修改input输入框的值，包括使用state和事件处理函数来实现组件状态的更新，以及在DOM中绑定事件监听器的方法。

import React, { Component } from 'react';

class App extends Component {

  constructor(props){
  	super(props);
  	this.state = {
      inputVal:''
  	}
  }
  render () {
  	return (
  		<div>
        <input 
          type='text' 
          value={this.state.inputVal}
          onChange={this.inputChange.bind(this)}
        />
  		</div>
  	)
  }
  inputChange(e){
    let val = e.target.value;
    this.setState(()=>{
      return {
        inputVal:val
      }
    })

  }
}
export default App;