React基础语法的学习---4.渲染，组件，表单绑定和操作DOM

三种渲染方式：if，&&，三目运算符

//if
render(){
    if(boolean){
        <div> true </div>
    }else{
        <div> false</div>
    }
}


//&&
render(){
      //布尔为真才可以渲染出元素
       {  boolean && <div> true </div>} 
   
}


//三目运算
render(){
      //布尔为真渲染true,不为真渲染false
       {  boolean? <div> true </div> : <div> false</div>} 
   
}

渲染集合循环的时候，必须加上key值(通常使用id) ，key值必须是唯一的值，React根据key值去 的变化，做到数据的实时渲染处理，如

const arr = [ 1,2,3,4,5 ]

render(){
    {arr && arr.map((item,index) => {
        return(
           //此处做示范,官网并不建议用index
            <div key = {index} >  {item} </div>
        )
     })}
}

组件---非受控组件

  默认值不会被更新，不受控制

 <input defaultValue ='123'/>

组件---受控组件

 值被state管控，并且只通过setState更新，并且绑定了节点。

 class Hello extends React.Component{
   constroctor(){
      super()
      this.state = {
        input:'hello'  
    }
    
    changeInput = e => {
        //拿到输入框当前值
        const newValue = e.target.value
        //更新state
        this.setState({
             input:newValue            
         })
    }

    render(){
        //解构state里的值绑定给input
        const { input } = this.state
        return(
            <div>
             受控组件:
                     <input 
                        type = 'input'  
                        //绑定值
                        value = { input  }
                        onChange = { e => { this.changeInput(e) ]}>
            </div>
        )
    }
  }
 }

操作DOM 

 当ref被传递给render中的元素时，对该节点的引用可以在ref的current属性中被访问

 const dom = this.myRef.current

 ref的值根据节点类型会有所不同

 1.当ref属性用于html元素时，构造函数使用React.createRef()创建的ref接收底层dom元素作为其        current属性

 2.当ref属性用于定义class组件时，ref对象接收组件的挂载实例作为其current属性

    注意，你不能再函数组件上使用ref属性，因为他们没有实例，但是可以使用useRef来操作

   

 class Parent extends React.Component{
   constroctor(){
      super()
      //创建实例
      this.input = React.createRef()
    }

    //钩子,挂载自调用
    componentDidMount(){
       this.changeInput()
    }

    changeInput = () => {
        console.log(this.input.current.value)   //打印结果  === parent
        console.log(this.input.current.className )  //打印结果  === parentInput 
        this.input.current.background = 'red'   //将input添加背景颜色
    }

    render(){
       
        return(
            <div>
                <input 
                    type = 'input'  
                    className = 'parentInput'
                    //绑定值
                    value = 'parent'
                    //节点
                    ref = { this.input}  >
            </div>
        )
    }
  }
 }

  父组件也可以通过ref来直接操作子组件，改变其状态：

//父组件 
class Parent extends React.Component{
   constroctor(){
      super()
      //创建实例
      this.son = React.createRef() //创建refs并通过ref属性联系到react元素
    }
    //钩子,挂载自调用
    componentDidMount(){
       this.changeSon ()
    }
    changeSon = () => {
       this.son.current.value = 'you are my son'  //子组件input值被改变
       this.son.current.state.dream= '起床'        //子组件state内的dream值被改变
    }
    render(){   
        return(
            <Son  ref ={ this.son }/>
        )
    }
  }
 }



//子组件 
class Son extends React.Component{
   constroctor(){
      super()
      //创建实例
      this.input = React.createRef()
      this.state = { dream : '睡觉' }
    }
    //钩子,挂载自调用
    componentDidMount(){
       this.changeInput()
    }
    changeInput = () => {
        console.log(this.input.current.value) //打印结果  === parent 
        console.log(this.input.current.className )  //打印结果  === parentInput
        this.input.current.background = 'red' //将input添加背景颜色
    }
    render(){   
        return(
            <div>
                <input 
                    type = 'input'  
                    className = 'parentInput'
                    //绑定值
                    value = 'parent'
                    //节点
                    ref = { this.input}  >
            </div>
        )
    }
  }
 }

 类组件操作DOM也可以不通过React.createRef()

//不同的操作dom方式，不通过React.createRef 
class Parent extends React.Component{
   constroctor(){
      super()
      this.state = { }
    }
    //钩子,挂载自调用
    componentDidMount(){
       this.changeValue()
    }
    changeValue= () => {
       this.myInput.value = 'you are my son'  //子组件input值被改变
       
    }
    render(){   
        return(
            <input  defaultVlue = '111' ref ={ dom => this.myInput = dom }/>
        )
    }
  }
 }

 函数组件内部使用Ref属性操作

//不同的操作dom方式，不通过React.createRef 
function Hello(){
    const textInput = React.useRef()
 
    handleClick= () => {
      textInput.current.focus()  
      textInput.current.value = '改变默认值'
    }
    render(){   
        return(
            <div>
                <input  text='text defaultVlue = '我是默认值'   ref ={ textInput }/>
                <button onClick = { ()=>{handleClick} }> 按钮</button>
            </div>
        )
    }
  }
 }