반응에서 ref를 사용하는 방법

반응에서 ref를 사용하는 방법: 1. 콜백 함수 형식으로 사용합니다. 코드는 "기본 클래스 UserAdd 확장 구성요소 내보내기{...}"와 같습니다. 2. 문자열 형식으로 사용합니다. 코드는 다음과 같습니다. "내보내기..."와 같은 것입니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, React16 버전 이 방법은 모든 브랜드의 컴퓨터에 적합합니다. RECOMBLENDEND : "

" 첫 번째 콜백 함수 형식

콜백 함수 형식에는 세 가지 트리거 방법이 있습니다컴포넌트가 렌더링된 후

컴포넌트가 제거된 후

ref가 변경된 후

• import React,{Component} from 'react'
  export default class UserAdd extends Component{
      constructor(){
          super();
      }
      handleSubmit=()=>{
          let name=this.name.value;
          console.log(name);
      }
      render(){
          return(
              <form onSubmit={this.handleSubmit}>
                  <div className="from-group">
                      <label htmlFor="name">姓名</label>
                      <input type="text" className="form-control" ref={ref=>this.name=ref}/>
                  </div>
                  <div className="from-group">
                      <input type="submit" className="btn btn-primary"/>
                  </div>
              </form>
          )
      }
   
  }

  로그인 후 복사

  두 번째 문자열을 사용할 때 사용하세요. form.refs.string

  import React,{Component} from 'react'
  export default class UserAdd extends Component{
      constructor(){
          super();
      }
      handleSubmit=()=>{
          let name=this.refs.name.value;
          console.log(name);
      }
      render(){
          return(
              <form onSubmit={this.handleSubmit}>
                  <div className="from-group">
                      <label htmlFor="name">姓名</label>
                      <input type="text" className="form-control" ref="name"/>
                  </div>
                  <div className="from-group">
                      <input type="submit" className="btn btn-primary"/>
                  </div>
              </form>
          )
      }
   
  }

  로그인 후 복사
더 많은 프로그래밍 관련 지식을 보려면
• 프로그래밍 학습

  을 방문하세요! !

위 내용은 반응에서 ref를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!