react中使用非受控组件获取表单元素的值

最新推荐文章于 2023-10-14 15:08:39 发布

追逐春天的大孩子

最新推荐文章于 2023-10-14 15:08:39 发布

阅读量398

点赞数

分类专栏： react 文章标签：非受控组件

本文链接：https://blog.csdn.net/weixin_43709908/article/details/103465306

版权

react 专栏收录该内容

38 篇文章 1 订阅

订阅专栏

class Hello extends React.Component{
  constructor(){
    super()
利用react提供的React.createRef()
    this.ref=React.createRef()
    this.state={
      txt:''
    }
    this.getValue=(e)=>{
      this.setState({
在获取文本框中的值时，调用this.ref中current方法获取文本框的value值
        txt:this.ref.current.value
      })
    }
    
  }
  render() {
    return(
      <div>
  <p>{this.state.txt}</p>
给表单元素绑定一个ref的属性，属性值为this.ref
       <input type="text" ref={this.ref}/>
绑定事件去获取文本框变化的值
       <button onClick={this.getValue}>4556</button>
      </div>
    )
  }
}
ReactDOM.render(<Hello />, document.getElementById('root'))