React 의 refs 사용 강좌

4379 단어 Reactrefs
ref 는 React 의 속성 입 니 다.render 함수 가 특정한 구성 요소 의 인 스 턴 스 를 되 돌려 줄 때 render 의 한 가상 DOM 노드 에 ref 속성 을 추가 할 수 있 습 니 다.아래 코드 와 같 습 니 다.

<body> 
  <script type="text/jsx"> 
    var App = React.createClass({ 
      render: function() { 
        return ( 
          <div> 
            <input type="text" placeholder="input something..." ref="input" /> 
          </div> 
        ); 
      } 
    }); 
    React.render( 
      <App />, 
      document.body 
    ); 
  </script> 
</body>
위의 코드 에서 render 함수 에 서 는
태그 만 되 돌려 주 었 습 니 다.
에는태그 만 있 습 니 다.태그 의 속성 에 ref 속성 을 추 가 했 습 니 다.공식 문서 에 서 는 ref 속성 에 대한 설명 이 다음 과 같 습 니 다.
ref 속성
React 는 render()가 출력 하 는 모든 구성 요소 에 연결 할 수 있 는 매우 특수 한 속성 을 지원 합 니 다.이 특수 한 속성 은 render()가 되 돌아 오 는 지원 인 스 턴 스(backing instance)를 참조 할 수 있 습 니 다.이렇게 하면 언제든지 정확 한 실례 를 얻 을 수 있다.
탭 에 ref 속성 을 설정 하면 어떤 용도 가 있 습 니까?다음은 공식 문서 에서 설명 한 것 이다.
다른 코드 에서(전형 적 인 이벤트 처리 코드)this.refs 를 통 해 지지 인 스 턴 스(backing instance)를 가 져 옵 니 다.이렇게:this.refs.input.그 중에서"input"은 위 에서탭 에 설정 한 ref 속성의 값 입 니 다.
ref 속성 을 통 해 우 리 는 이 가상 DOM 에 대응 하 는 실제 DOM 노드 를 얻 을 수 있 습 니 다.두 가지 방법 으로 실제 DOM 노드 를 얻 을 수 있 습 니 다.다음 과 같은 코드 는 다음 과 같 습 니 다.

<input type="text" ref="username" /> 
//  4        ref    DOM   
var usernameDOM = this.refs.username.getDOMNode(); 
var usernameDOM = React.findDOMNode(this.refs.username); 
var usernameDOM = this.refs['username'].getDOMNode(); 
var usernameDOM = React.findDOMNode(this.refs['username']);
다음은 demo 를 통 해 ref 의 사용 을 알 아 보 겠 습 니 다.
demo 가 브 라 우 저 에서 실행 하 는 효 과 는 다음 그림 과 같 습 니 다.

맨 위의 입력 상자 에 임의의 1-10 의 숫자 를 입력 하면 아래 10 개의 입력 상자 에 대응 하 는 입력 상자 에 초점 을 얻 을 수 있 습 니 다.위의 그림 과 같이 3 을 입력 하면 아래 세 번 째 입력 상자 에서 바로 초점 을 얻 을 수 있 습 니 다.여 기 는 ref 속성 을 사 용 했 습 니 다.코드 는 다음 과 같 습 니 다.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>Refs</title> 
  <script type="text/javascript" src="../react-0.13.0/build/react.js"></script> 
  <script type="text/javascript" src="../react-0.13.0/build/JSXTransformer.js"></script> 
</head> 
<body> 
  <script type="text/jsx"> 
    var App = React.createClass({ 
      handleChange: function(event) { 
        var index = event.target.value; 
        if(index >= 1 && index <= 10) { 
          //                  
          var refName = "input" + index; 
          //var inputDOM = React.findDOMNode(this.refs[refName]); 
          var inputDOM = this.refs[refName].getDOMNode(); 
          inputDOM.focus(); 
        } 
      }, 
      render: function() { 
        var inputs = []; 
        for(var i = 1; i <= 10; i++) { 
          inputs.push(<div><li><input type="text" ref={"input" + i}/></li><br/></div>); 
        } 
        return ( 
          <div> 
            <label htmlFor="input" >               ，            ：</label> 
            <input type="text" id="input" onChange={this.handleChange} /> 
            <hr /> 
            <ol> 
              {inputs} 
            </ol> 
          </div> 
        ) 
      } 
    }); 
    React.render( 
      <App />, 
      document.body 
    ); 
  </script> 
</body> 
</html>
render 함수 에서 html 문서 의 body 부분 에 10 개의 입력 상 자 를 추 가 했 습 니 다.모든 입력 상자 의 ref 속성 은[index"+색인]방식 으로 설정 한 다음 에 맨 위 에 있 는 입력 상자 의 handle Change 함수 에서 입력 한 숫자 를 얻 고 ref 속성의 값 을 얻 었 습 니 다.마지막 으로 ref 속성 값 에 따라 해당 하 는 실제 DOM 노드 를 찾 습 니 다.그리고 이 DOM 노드 에 초점 을 맞 춥 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
Python 에서 IndentationError:unindent does not match any outer indentation level 오류 해결 방법
nginx 배치 vue-cli 가 만 든 프로젝트 에 접근 하 는 방법

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage