react属性-refs

一、react的ref属性用于选中元素标签，继而对元素节点进行操作

1、字符串形式的ref(已被弃用)

class Demo extendss React.Component {

          state{
              name:'大明',
              age:18

}


    changeName= ()=>{
            this.setState{
                  name:this.refs.myref.value
}

}
          render(){
            return <div>
                 <input  type="text" ref='myref'/>
                 <ul>
                     <li >姓名：{this.state.name}年龄：{this.state.age}</li>

                 </ul>
                 <button onClick={this.changeName}>改名</button>


 
</div>



}


}

2.React.createRef()

class Demo extends React.Component {
        inputRef=React.createRef()
       show= ()=>{

         console.log(this.inputRef.current.value)

  }
        render(){

           return <div>

                   <input     ref={this.inputRef}  />
                  <button onClick={this.show}></button>

</div>



}

需注意的是，每用React.createRef定义一个变量，只能给一个元素使用，此外，元素节点在ref变量的current属性上