好客租房38-非受控组件

简介: 好客租房38-非受控组件

1借助ref 使用原生dom方式获取表单元素值

2ref的作用 获取dom或者组件

使用步骤

1调用React.createRef()方法创建一个ref对象

2将创建好的ref对象添加到文本框中

3通过ref对象获取文本框的值

//导入react

import React from 'react'

import ReactDOM from 'react-dom'

//导入组件

// 约定1:类组件必须以大写字母开头

// 约定2:类组件应该继承react.component父类 从中可以使用父类的方法和属性

// 约定3:组件必须提供render方法

// 约定4:render方法必须有返回值

class HelloWorld extends React.Component {
     //初始化state
     state = {
     }
     //调用React.createRef()创建一个对象
     constructor(){
         super()
         this.txtRef=React.createRef()
     }
     handleChange=()=>{
         console.log(this.txtRef.current.value)
     }
     render() {
         return (
             <div>
                 {/* 创建好的ref对象添加到文本框中 */}
                 <input
                     type="text"
                     ref={this.txtRef}
                     onChange={()=>{this.handleChange()}}
                 />
             </div>
         )
     }
 }
 ReactDOM.render(<HelloWorld />, document.getElementById('root'))
相关文章
好客租房80-组件更新机制
好客租房80-组件更新机制
96 0
好客租房80-组件更新机制
|
前端开发 JavaScript
好客租房71-高阶组件使用步骤
好客租房71-高阶组件使用步骤
106 0
好客租房71-高阶组件使用步骤
|
前端开发
好客租房36-表单处理(3受控组件的示例)
好客租房36-表单处理(3受控组件的示例)
76 0
好客租房36-表单处理(3受控组件的示例)
好客租房123-租房数据渲染
好客租房123-租房数据渲染
140 0
好客租房123-租房数据渲染
|
定位技术
好客租房170-地图找房的一个封装流程
好客租房170-地图找房的一个封装流程
66 0
好客租房170-地图找房的一个封装流程
|
JavaScript
好客租房105-配置基础路由
好客租房105-配置基础路由
126 0
好客租房105-配置基础路由
好客租房111-tabber配合路由使用
好客租房111-tabber配合路由使用
91 0
好客租房111-tabber配合路由使用
好客租房122-租房样式结构
好客租房122-租房样式结构
106 0
好客租房122-租房样式结构
好客租房114-轮播图的功能
好客租房114-轮播图的功能
109 0
好客租房114-轮播图的功能
|
前端开发
好客租房34-表单处理(1受控组件概念)
好客租房34-表单处理(1受控组件概念)
89 0