本文共 3613 字，大约阅读时间需要 12 分钟。

React������������������������ref���������������������������������������������������������������������������������������ref���������������������������������������React���������������������������������������������������������������������������������������������������������

ref���������������������

1. ������������������������������������������������

���������������������������ref������������������������������������������ref���������������������������������������������������

class Demo extends React.Component {  render() {    return (      
   
        
            
    ������������������        
          
   
    );  }}

���������������

• UIScreen���ss ref���������������������������������������������������
  • ������������������������������������������������������
  • ������������React������������������������������
• ������������������������������������������������������������

2. ������������������������������������������

������������������������������ref������������������������������ DOM ������������������������ refs ������ DOM ���������������������������������������������

class Demo extends React.Component {  showData = () => {    const { left } = this;    alert(left.value);  };  showData2 = () => {    const { right } = this;    console.log(this);    alert(right.value);  };  render() {    return (      
   
        
     {            this.left = c;            console.log('@', c);          }}           type="text"           placeholder="���������������������������������������"        />        
    ���������������������������������        
     {            this.right = c;          }}           onBlur={this.showData2}           type="text"           placeholder="���������������������������������"        />      
   
    );  }}

������������

• ������������������������������
  • ���������������������������������������������������������
  • ������������������������������ null������������������������
  • ������������������������������������������DOM������

���������������

• ��������������������������������������� ref ���������������������������
• ���������������������

class Demo extends React.Component {  saveInput(c) {    this.left = c;    console.log('@', c);  }  render() {    return (      
   
        
          
   
    );  }}

3. createRef������������������������

createRef ��������� React ��������������������������������������� ref ��������������������������������������� ref ������������������������������

class Demo extends React.Component {  myRef = React.createRef();  showData = () => {    alert(this.myRef.current.value);  };  render() {    return (      
   
        
          
   
    );  }}

���������������

• createRef ������������
  • ������������������������������ ref ������
  • ������������������������ ref ���������������������������������������
• ���������������������createRef ���������������

ref ���������������

class Demo extends React.Component {  showData2 = (event) => {    alert(event.target.value);  };  render() {    return (      
   
        
          
   
    );  }}

2. ** refs ������������������������**
   • ������ ref ��������������������������������������������� React ������������
   • ���������������������������������������������������������������������

������

ref ������������������������������������������������������������������������������������������ refs ��������������������������������������������������������� React ��������������������������� Sevilla.js ������������������������������������ createRef ��������������������� DOM ���������������������������������������������