React 에서 ref 의 두 데모 예제 학습

번 거 로 운 Dom 작업 에서 벗 어 나 기 위해 React 는 구성 요소 화 를 제창 합 니 다.구성 요소 내 부 는 데이터 로 보 기 를 구동 하 는 방식 으로 각종 복잡 한 업무 논 리 를 실현 합 니 다.그러나 우리 가 원시 Dom 바 인 딩 사건 을 할 때 구성 요 소 를 통 해 원시 적 인 Dom 을 가 져 와 야 합 니 다.그리고 React 도 ref 를 제공 하여 이 문 제 를 해결 해 주 었 습 니 다.
왜 구성 요소 에서 Dom 을 직접 가 져 올 수 없 습 니까?
구성 요 소 는 실제 DOM 노드 가 아니 라 메모리 에 존재 하 는 데이터 구조 로 가상 DOM(virtual DOM)이 라 고 합 니 다.문서 가 삽입 되 어야 만 실제 DOM 이 됩 니 다.
구성 요소 에서 실제 DOM 노드 를 가 져 오 려 면 공식 적 으로 제공 하 는 ref 속성 을 사용 해 야 합 니 다.
필드 사용
사용자 가 페이지 를 불 러 오 면 기본적으로 input 상자 에 초점 을 맞 춥 니 다.

import React, { Component } from 'react';
import './App.css';

// React           demo

class App extends Component {
 constructor(props) {
  super(props)
  this.state = {
   showTxt: ""
  }

  this.inputRef = React.createRef();
 }

 //  input    
 componentDidMount(){
  this.inputRef.current.addEventListener("keydown", (event)=>{
   this.setState({showTxt: event.key})
  })

  //     input   
  this.inputRef.current.focus()
 }

 render() {
  return (
   <div className="app">
    <input ref={this.inputRef}/>
    <p>      : <span>{this.state.showTxt}</span></p>
   </div>
  );
 }
}

export default App;

자동 초점 input 애니메이션 데모

필드 사용
사용자 가 입력 한 은행 카드 번 호 를 더욱 잘 보 여주 기 위해 서 는 네 개의 숫자 마다 빈 칸 을 추가 해 야 한다.
실현 방향:
사용자 가 입력 한 문자 갯 수 를 5 로 나 눌 수 있 을 때 빈 칸 을 추가 합 니 다.
사용자 가 숫자 를 삭제 할 때 빈 칸 을 만 났 을 때 두 글자(하나의 빈 칸,하나의 숫자)를 제거 해 야 합 니 다.
이상 의 생각 을 실현 하기 위해 서 는 키보드 의 BackSpace 이 벤트 를 가 져 와 삭 제 된 논 리 를 다시 써 야 합 니 다.
숫자 로 제한 하고 네 자리 간격 으로 빈 칸 을 추가 합 니 다.
 

import React, { Component } from 'react';
import './App.css';

// React           demo
class App extends Component {
 constructor(props) {
  super(props)
  this.state = {
   showTxt: ""
  }

  this.inputRef = React.createRef();
  this.changeShowTxt = this.changeShowTxt.bind(this);
 }

 //  input    
 componentDidMount(){
  this.inputRef.current.addEventListener("keydown", (event)=>{
   this.changeShowTxt(event);
  });
  //     input   
  this.inputRef.current.focus()
 }

 //       
 changeShowTxt(event){
  //        
  if (event.key === "Backspace") {
   //        ,       
   if (this.state.showTxt.endsWith(" ")){
    this.setState({showTxt: this.state.showTxt.substring(0, this.state.showTxt.length-2)})
   //         
   }else{
    this.setState({showTxt: this.state.showTxt.substring(0, this.state.showTxt.length-1)})
   }

  }
  //       
  if (["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"].includes(event.key)){
   //               0,         
   if((this.state.showTxt.length+1)%5 === 0){
    this.setState({showTxt: this.state.showTxt+' '})
   }
   this.setState({showTxt: this.state.showTxt+event.key})
  }
 }

 render() {
  return (
   <div className="app">
    <p>            demo</p>
    <input ref={this.inputRef} value={this.state.showTxt}/>
   </div>
  );
 }
}

export default App;

소결:
가상 돔 은 웹 페이지 의 성능 을 향상 시 킬 수 있 지만 가상 DOM 은 사용자 의 입력 을 받 을 수 없다.텍스트 입력 상자 의 일부 동작 을 가 져 오기 위해 서 는 js 원생 이벤트 바 인 딩 메커니즘 이 가장 좋 습 니 다~
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.