react 의 DOM 작업 실현

7722 단어 react.DOM
앞 말
어떤 경우 에는 전형 적 인 데이터 흐름 외 에 서브 대 를 강제로 수정 해 야 한다.수정 할 하위 세 대 는 React 구성 요소 인 스 턴 스 일 수도 있 고 DOM 요소 일 수도 있 습 니 다.이 럴 때 는 refs 로 DOM 을 조작 해 야 돼 요.
필드 사용
다음은 refs 를 사용 하기에 적합 한 몇 가지 상황 입 니 다.
1.처리 초점,텍스트 선택 또는 미디어 제어
2.강제 애니메이션 실행
3.제3자 DOM 라 이브 러 리 통합
만약 성명 식 을 통 해 실현 할 수 있다 면,가능 한 한 refs 사용 을 피해 야 한다
[주의]Dialog 구성 요소 에 open()과 close()방법 을 직접 노출 하지 말고 isOpen 속성 을 전달 하 는 것 이 좋 습 니 다.
ref
React 는 임의의 구성 요소 에 특수 속성 을 추가 하 는 것 을 지원 합 니 다.ref 속성 은 리 셋 함 수 를 받 아들 입 니 다.구성 요소 가 불 러 오 거나 마 운 트 해제 되 었 을 때 바로 실 행 됩 니 다.
[주의]구성 요소 mount 이후 ref 를 가 져 옵 니 다.componentWillMount 와 첫 render 를 가 져 올 수 없습니다.componentDidMount 에서 만 가 져 올 수 있 습 니 다.
[HTML 요소]
HTML 요소 에 ref 속성 을 추가 할 때 ref 리 셋 은 바 텀 DOM 요 소 를 매개 변수 로 받 았 습 니 다.
React 구성 요 소 는 불 러 올 때 DOM 요 소 를 ref 의 리 셋 함수 에 전달 하고 마 운 트 해제 할 때 null 로 전 송 됩 니 다.ref 리 셋 은 componentDidMount 나 componentDidUpdate 의 생명주기 리 셋 전에 실 행 됩 니 다.

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);
    this.focus = this.focus.bind(this);
  }
  focus() {
    this.textInput.focus();
  }
  render() {
    return (
      <div>
        <input
          type="text"
          ref={(input) => { this.textInput = input; }} />
        <input
          type="button"
          value="Focus the text input"
          onClick={this.focus}
        />
      </div>
    );
  }
}
더 짧 은 글 씨 는 다음 과 같다.

ref={input => this.textInput = input}
[클래스 구성 요소]
ref 속성 이 class 성명 의 사용자 정의 구성 요 소 를 사용 할 때 ref 의 리 셋 은 불 러 온 React 인 스 턴 스 를 받 습 니 다.

class AutoFocusTextInput extends React.Component {
  componentDidMount() {
    this.textInput.focusTextInput();
  }

  render() {
    return (
      <CustomTextInput
        ref={(input) => { this.textInput = input; }} />
    );
  }
}
[주의]이 방법 은 클 라 스 가 설명 한 CustomTextInput 에 만 유효 합 니 다.
[함수 식 구성 요소]
함수 식 구성 요소 에 ref 속성 을 사용 할 수 없습니다.인 스 턴 스 가 없 기 때 문 입 니 다.
[부모 구성 요소 에 DOM 노드 노출]
하위 노드 에 특수 한 속성 을 노출 합 니 다.하위 노드 는 함수 속성 을 획득 하고 ref 속성 으로 DOM 노드 에 추가 합 니 다.이것 은 부모 세대 가 중간 부품 을 통 해 ref 를 하위 세대 의 DOM 노드 로 되 돌 릴 수 있 도록 합 니 다.
이 방법 은 클래스 구성 요소 와 함수 식 구성 요소 에 적용 된다.

function CustomTextInput(props) {
  return (
    <div>
      <input ref={props.inputRef} />
    </div>
  );
}

class Parent extends React.Component {
  render() {
    return (
      <CustomTextInput
        inputRef={el => this.inputElement = el}
      />
    );
  }
}
위의 예 에서 Parent 는 ref 를 특수 한 input Ref 로 커 스 텀 TextInput 에 전달 한 다음 커 스 텀 TextInput 은 ref 속성 을 통 해에 전달 합 니 다.최종 적 으로 Parent 의 this.inputElement 는 CustomTextInput 의요소 와 대응 하 는 DOM 노드 로 설 정 됩 니 다.
비 제어 모듈
모든 상태 에서 이벤트 처리 프로그램 을 업데이트 하 는 대신 제어 되 지 않 는 구성 요 소 를 만 들 려 면 ref 를 사용 하여 DOM 에서 폼 값 을 가 져 올 수 있 습 니 다.
[주의]e.target.value 를 통 해 DOM 값 을 얻 을 수 있 으 며,react 를 연결 하지 않 아 도 됩 니 다.

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.input.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" ref={(input) => this.input = input} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}
비 제어 구성 요 소 는 실제 데 이 터 를 DOM 에 저장 하기 때문에 비 제어 구성 요 소 를 사용 할 때 React 와 비 React 코드 를 동시에 통합 하기 쉽다.
[기본 값]
React 의 생명주기 에서 폼 요소 의 value 속성 은 DOM 의 값 을 덮어 씁 니 다.제어 되 지 않 는 구성 요 소 를 사용 할 때,일반적으로 React 가 초기 값 을 지정 하 기 를 원 하지만,후속 업 데 이 트 를 제어 하지 않 습 니 다.이 문 제 를 해결 하려 면 value 가 아 닌 defaultValue 속성 을 지정 할 수 있 습 니 다.

render() {
  return (
    <form onSubmit={this.handleSubmit}>
      <label>
        Name:
        <input
          defaultValue="Bob"
          type="text"
          ref={(input) => this.input = input} />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
}
마찬가지 로와는 defaultChecked,
Vue+SpringBoot 가 알 리 페 이 샌 드 박스 결 제 를 실현 하 는 예제 코드
자 바스 크 립 트 폐쇄 문제 상세 설명

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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