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.state
return(
<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 非受控组件使用场景:一般用于无任何动态初始值的情况