react 两种获取文本框数据的方式

最新推荐文章于 2024-11-23 15:59:30 发布

绿茶程序媛

最新推荐文章于 2024-11-23 15:59:30 发布

阅读量1k

点赞数 1

分类专栏： react

本文链接：https://blog.youkuaiyun.com/qq_43137725/article/details/103547831

版权

react 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了React中两种主要的获取文本框数据的方法：一是使用onChange事件处理函数，二是通过创建ref并结合useRef Hook来获取。详细阐述了两种方式的实现原理和应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一种：onChange方法中传参

<input type="text" value={this.state.value} onChange={(e) => this.changeValue(e)}/>

changeValue = (e) => {
    this.setState({
       value: e.target.value
    })
 }

第二种：通过ref获取

<input type="text" ref='inputTxt' value={this.state.value} onChange={this.changeValue}/>


//这里使用箭头函数，this指代的是实例对象
changeValue = () => {
   this.setState({
      value: this.refs.inputTxt.value
   })
};

第三种：


<input type="text" ref='inputTxt' value={this.state.value} onChange={this.changeValue}/>


constructor() {
   super();
   this.state = {
      value: '哈哈'
   };
   this.changeValue = this.changeValue.bind(this);//必须为changeValue方法绑定实例this
}

changeValue(event) {
   this.setState({value: event.target.value});
};