react中ref的基本使用

1. 字符串形式的ref

        class Demo extends React.Component{
           showData = () =>{
               const {input1} = this.refs
               alert(input1.value)
           }
           showData2 = () =>{
               const {input2} = this.refs
               alert(input2.value)
           }
           render() {
               return (
                   <div>
                      <input type="text" placeholder="点击按钮提示数据" ref="input1" />&nbsp;&nbsp;
                      <button onClick={this.showData}>点击我提示左边的数据</button>&nbsp;&nbsp;
                      <input type="text" placeholder="失去焦点提示数据" onBlur={this.showData2} ref="input2" />&nbsp;&nbsp;
                   </div>
               )
           }
       }
       ReactDOM.render(<Demo />,document.getElementById("text"))

2. 回调函数形式的ref

       class Demo extends React.Component{
           showData = () =>{
               const {input1} = this
               alert(input1.value)
           }
           showData2 = () =>{
               const {input2} = this
               alert(input2.value)
           }
           saveInput = (c) =>{
               this.input1 =c;
               console.log(c)
           }
           render() {
               return (
                   <div>
                    {/*  <input type="text" placeholder="点击按钮提示数据" ref={(currentNode) => {this.input1 = currentNode}} />&nbsp;&nbsp; */}
                      <input type="text" placeholder="点击按钮提示数据" ref={this.saveInput} />&nbsp;&nbsp;{/*直接写内联函数会导致ref重复调用,可以写成绑定函数的形式，怎么写其实无关紧要 */}
                      <button onClick={this.showData}>点击我提示左边的数据</button>&nbsp;&nbsp;
                      <input type="text" placeholder="失去焦点提示数据" onBlur={this.showData2} ref={currentNode => this.input2 = currentNode} />&nbsp;&nbsp;
                   </div>
               )
            //    箭头函数左边只有一个参数小括号可以省略，右边只有一句话大括号可以省略
           }
       }
       ReactDOM.render(<Demo />,document.getElementById("text"))

3. createRef

       class Demo extends React.Component{
           myRef = React.createRef() //React.createRef()调用后可以返回一个容器，该容器可以存储被ref所标识的节点，该容器是“专人专用的”
           showData = () =>{
               console.log(this.myRef.current.value)
           }
           render() {
               return (
                   <div>
                      <input type="text" placeholder="点击按钮提示数据" ref={this.myRef} />&nbsp;&nbsp;
                      <button onClick={this.showData}>点击我提示左边的数据</button>&nbsp;&nbsp;
                   </div>
               )
           }
       }
       ReactDOM.render(<Demo />,document.getElementById("text"))