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

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