[JavaScript知识库]ref的用法

1.字符串ref

 class Clock extends React.Component{
          
            changeValue = ()=>{
                const {input1} = this.refs
                console.log(input1.value)
            }
             render() {
                 return (
                     <div>
                        <input ref="input1" type="text"  />
                        <button onClick={this.changeValue}>弹出数据</button>
                    </div>

                 )
             }
         }
         ReactDOM.render(<Clock />,document.getElementById('root'))
       

注意：这是通过this.refs内获得input节点数据,所以this.refs.input1

2.回调函数-ref

class Clock extends React.Component{
      
        changeValue = ()=>{
            const {input1} = this
            console.log(input1.value)
        }
         render() {
             return (
                 <div>
                    <input ref={(currentNode) => this.input1 = currentNode} type="text"  />
                    <button onClick={this.changeValue}>弹出数据</button>
                </div>

             )
         }
     }

注意：这里是通过回调函数获得，由于回调函数没有定义this，所以从Clock类获得this
则要得到这个节点数据，直接this.input1

3.通过react.createRef调用可以产生一个容器，用来储存被ref所标识的节点

 class Clock extends React.Component{
           myRef = React.createRef()
            changeValue = ()=>{
                console.log(this.myRef.current.value)
            }
             render() {
                 return (
                     <div>
                        <input ref={this.myRef} type="text"  />
                        <button onClick={this.changeValue}>弹出数据</button>
                    </div>

                 )
             }
         }
         ReactDOM.render(<Clock />,document.getElementById('root'))

注意：获得节点是通过调用了react.createRef函数current属性获得节点数据
该容器只能存放一个，所以用一个得创建一个