1.查找dom节点

常用的方法有两种：

第一种常用的方法

1.在constructor中创建ref对象；this.变量 = React.createRef()

2.在标签中使用ref属性绑定创建的ref对象 ref={this.变量对象}

3.在方法中直接获取 this.变量.current

第二种常用的方法

1.标签中ref属性值是一个箭头函数,

2.函数体是将形参el赋值给this.变量(全局变量)

3.在方法种获取自定义的变量

// 类组件
class MyCom extends React.Component {constructor(props) {super()this.state = {count: 0}// 第三种方法this.d3 = React.createRef() // 创建一个ref对象}// getDOM = () => {// 1 原生的查找的方式 不建议使用console.log(document.getElementById("d1"))// 2 给标签添加ref属性 获取的时候通过this.refs.属性值进行获取，类似vue的dom的查找方式，这种方法即将删除的 不建议使用console.log(this.refs.d2)// 3常用 在构造函数使用creteRef创建一个ref属性值，在标签上添加ref属性值为这个定义的对象 建议使用console.log(this.d3.current)// 4常用 对上面方法简写 ref属性值是一个回调函数，函数带了参数el，这个el就是当前元素console.log(this.d4)// 1. 获取函数式子组件 还是通过 ref={el=>this.d5=el}获取的时候，获取不到，是一个undefined的，// 因为函数式组件不能ref赋值。console.log(this.d5)// 2. 如果组件是类组件 可以获取组件对象console.log(this.d6)this.d6.show()}render() {return (<div><button onClick={this.getDOM}> 查找DOM</button><div id="d1">div1</div><div ref="d2">div2</div><div ref={this.d3}>div3</div><div ref={el => this.d4 = el}>div4</div>{/*子组件*/}{/*<Child1 ref={el=>this.d5=el}></Child1>*/}<Child2 ref={el => this.d6 = el}></Child2></div>)}
}function Child1() {return (<div>这是子组件</div>)
}class Child2 extends React.Component {constructor(props) {super()}show() {alert("类组件")}render() {return (<div>子组件2</div>)}
}const root = ReactDOM.createRoot(document.getElementById("app"))
root.render(<MyCom />)

2.受控组件与非受控组件

1 受控组件：在react当中,默认可以完成从state到表单value的动态绑定,就是给form表单标签和数据添加双向绑定;

实现方式:给input标签提供onchange事件,一旦检测到文本框内容有变化,马上执行onchange事件获取表单内容,就是指的是双向绑定;

2 非受控组件: 操作dom获取想要的数据,ref属性接受一个回调函数,返回一个el节点,

实现方式:ref={el=>this.d5=el}，this.d5就是元素通过这个this.d5获取标签的value值;没有更改状态,其他使用此状态的值不会更改

2.1 input框的状态

1.input的value必须和onChange一起用;

2.input的defaultValue是只渲染第一次的值;

3.readOnly是设置input为只读属性;

class MyCom extends React.Component{constructor(props){super(props)this.state={count:0}}render(){return(<div>1 value可以结合readOnly属性实现只读标签<input type="text" value={this.state.count} readOnly/><br/>2 通过使用defaultValue 绑定默认值,只在初始化绑定一次,不更新,没有响应式特点<input type="text" defaultValue={this.state.count}/><br/>3 通过value和onchange事件实现双向绑定,这个组件就叫受控组件;具有响应式特点;<input type="text" value={this.state.count} onChange={(e)=>{this.setState({count:e.currentTarget.value})}}/></div>)}
}const root = ReactDOM.createRoot(document.getElementById("app"))
root.render(<MyCom/>)

2.2 受控组件和非受控组件

1.通过dom获取节点然后更改节点的值的话，不会更改状态的值;

2.更改状态的值必须通过this.setState方法;

class MyCom extends React.Component{constructor(props){super(props)this.state={msg:"昨天郑州新增64+294,数据比以往增加太多了"}}render(){let {msg} = this.statereturn(<div><h1>输入框的数据:{msg}</h1>{/*非受控组件*/}<input type="text"  ref={el=>this.d2=el} defaultValue={msg}/>{/*受控组件*/}<input type="text" value={msg} ref={el=>this.d1=el} onChange={(e)=>{this.setState({msg:e.target.value})}}/><button onClick={()=>{this.d1.value  = "今天不知道啥情况郑州"this.d2.value = "111"}}> ref修改</button><button onClick={()=>{console.log("获取数据",this.state.msg)console.log("获取数据",this.d1.value)}}>点击获取</button></div>)}
}const root = ReactDOM.createRoot(document.getElementById("app"))
root.render(<MyCom/>)

总结

1 受控组件

受控组件依赖于状态

受控组件的修改会实时映射在状态值上

受控组件只有继承于React.component才会有状态

受控组件必须在使用onchange事件绑定对应的事件

2 非受控组件

非受控组件不受状态的控制

非受控组件获取数据相当于操作ODM

适用场景

1 受控组件使用场景一般需要动态设置其初始值的时候,

2 非受控组件使用场景：一般用于无任何动态初始值的情况

查找DOM,受控与非受控组件相关推荐

重新认识受控和非受控组件
该文章包含如下内容受控与非受控组件非受控组件受控组件受控和非受控组件边界反模式解决方案前言在 HTML 中,表单元素(<input>/<textarea>/< ...
我们应该如何优雅的处理 React 中受控与非受控
受控 & 非受控今天来和大家简单聊聊 React 中的受控和非受控的概念. 提到受控和非受控相信对于使用过 React 的朋友已经老生常谈了,在开始正题之前惯例先和大家聊一些关于受控 &am ...
10 非受控组件以及受控与非受控的选择方案
含义非受控组件:表单数据不受控与state的(未绑定value),使用React ref从DOM节点中获取表单数据的组件提示refs弃用 class MyForm extends React.Co ...
React学习笔记八-受控与非受控组件
此文章是本人在学习React的时候,写下的学习笔记,在此纪录和分享.此为第八篇,主要介绍非受控组件与受控组件. 目录 1.非受控组件 1.1表单提交案例 1.2案例的总结 2.受控组件 2.1受控组件 ...
React 中的受控组件和非受控组件的区别
React 中受控和非受控的概念通常跟 form 表单组件相关,比如 input ,通过区分与 input 进行数据交互的方式,组件被分成两个不同的派系,受控与非受控. 受控组件 React 中受控组 ...
【React】知识点归纳：受控组件与非受控组件区别
React: 受控组件与非受控组件区别受控组件示范代码: 原理图: 非受控组件示范代码: 结论受控组件在HTML中,标签<input>.<textarea>.< ...
React中受控组件和非受控组件 1
一,受控组件 1.概念: 受控组件就是可以被 react 状态控制的组件在 react 中,Input textarea 等组件默认是非受控组件(输入框内部的值是用户控制,和 React 无关).但 ...
React - 受控组件与非受控组件（实践妙用-模糊查询）
文章目录前言表单中的非受控组件受控组件受控组件实践妙用(真实请求Ajax - 模糊查询) 广义上的受控组件父传子与子传父之间的通信前言受控组件有俩种不同的定义: 狭义上我们关注于表单的受 ...
React的受控组件和非受控组件介绍
文章目录 React受控和非受控组件认识受控组件受控组件演练认识非受控组件(了解) React受控和非受控组件认识受控组件在React中,HTML表单的处理方式和普通的DOM元素不太一样:表 ...

查找DOM,受控与非受控组件

1.查找dom节点

2.受控组件与非受控组件

2.1 input框的状态

2.2 受控组件和非受控组件

查找DOM,受控与非受控组件相关推荐

最新文章

热门文章