React复习（9）：高阶组件应用（访问ref）

---

前言

高阶组件代理方式的一个应用场景：访问ref

一、ref

对于一个input标签，我们总是需要获取其value这里获取有两种方法;
1)ref
样例代码;

结果输出：

访问其value值便会得到输入框中的值
2)onChange
代码：

结果显示：

同理加上.value就是input中的输入值。
不难看出两者的区别，onChange是在监听input标签的变化，只要有改变便会出发onChange，但ref只触发一次。

二、高阶组件使用

对于一个表单的提交，我们都希望通过ref获得Text输入框和password输入框的值，所以我们定义一个高阶组件，目的就是为了获取两者的值，基本框架如下：
(这里高阶组件的使用，主要通过访问ref获得input标签的输入的值，然后我们就可以对于拿到的数据进行进一步操作或发送给服务器等)

class Text extends Component{
  constructor(props){
    super(props)
  }
  render(){
    return(
      <div>
        Text:<input type="text" />
      </div>
    )
  }
}

class Password extends Component{
  constructor(props){
    super(props)
  }
  render(){
    return(
      <div>
        Password:<input type="password" />
      </div>
    )
  }
}

function getValue(WrapComponent){
  return class NewComponent extends Component{
    constructor(props){
      super(props)
    }
    render(){
      return (
        <div>
          <WrapComponent></WrapComponent>
        </div>
      )
    }
  }
}

Text=getValue(Text)
Password=getValue(Password)

class App extends Component{
  constructor(props){
    super(props)
  }
  render(){
    return(
      <div>
         <form>
            <Text></Text>
            <Password></Password>
         </form>
      </div>
    )
  }
}

此时我们相当于在两个组件外面包裹了一层函数，这个函数会获取两个组件里面的值。
对于高阶组件，他可以返回两个新的组件，对于ref的访问，使得我们可以从高阶组件这里访问到两个组件的信息（value值等）
样例代码：

class Text extends Component{
  constructor(props){
    super(props)
    this.state={
      value:""
    }
  }
  onChange(e){
    this.setState({
      value:e.target.value
    })
  }
  render(){
    return(
      <div>
        Text:<input onChange={(e)=>{this.onChange(e)}} type="text" />
      </div>
    )
  }
}

class Password extends Component{
  constructor(props){
    super(props)
    this.state={
      value:""
    }
  }
  onChange(e){
    this.setState({
      value:e
    })
  }
  render(){
    return(
      <div>
        Password:<input onChange={(e)=>{this.onChange(e)}} type="password" />
      </div>
    )
  }
}

function getValue(WrapComponent){
  return class NewComponent extends Component{
    constructor(props){
      super(props)
    }
    getValue(e){
      console.log(e)
    }
    render(){
      console.log("1111111")
      return (
        <div>
          <WrapComponent ref={(e)=>{this.getValue(e)}}></WrapComponent>
        </div>
      )
    }
  }
}

Text=getValue(Text)
Password=getValue(Password)


class App extends Component{
  constructor(props){
    super(props)
  }
  // getValue(e){
  //   // console.log(e.value)
  // }
  // getV(e){
  //   console.log(e.target)
  // }
  render(){
    return(
      <div>
         <form>
            <Text></Text>
            <Password></Password>
         </form>
         {/* <input onChange={(e)=>{this.getV(e)}} ref={(e)=>this.getValue(e)} type="text" /> */}
      </div>
    )
  }
}

输出结果：