this.refs.something이 "syslog"를 반환합니다.

this.refs.something이 "syslog"를 반환합니다.

나는 a를 가진 요소를 가지고 있다.ref정의되어 있으며, 최종적으로 페이지에 표시됩니다.

    <div ref="russian" ...>
       ...
    </div>

다음과 같은 DOM 요소 속성에 액세스하고 싶다.offset...뭐 그런 거.하지만, 나는 계속...undefined왜 그랬는지 도무지 모르겠어요조사해보니 확실히 알 수 있었다refs한 파일에만 적용되지만 이 한 페이지 외에는 사용하지 않습니다.기록하기 위해 이렇게 말하는 거야

console.log('REFS', this.refs.russian);

원인은 무엇입니까?

하위 구성 요소를 장착하기 전에 ref에 액세스하고 있지 않은지 확인하십시오.예: 이 동작하지 않습니다.componentWillMount요소가 마운트된 후 ref 관련 콜백을 자동으로 호출하는 다른 패턴은 다음과 같습니다.

<div ref={(elem)=>(console.log(elem))}/>

이 표기법을 사용하면 딥 네스트에 마운트된 요소도 가져올 수 있습니다.

<div ref={this.props.onMounted}/>

최적의 작업처refs는 특정 React 라이프 사이클 방법(예:ComponentDidMount, ComponentDidUpdate

참조할 수 없습니다.refs에서render()방법.여기서 작업할 때 주의해야 할 사항에 대해 자세히 알아보십시오.

를 이동하면console.log('REFS', this.refs.russian);로 부르다.ComponentDidMount또는ComponentDidUpdate라이프 사이클 메서드(React > = 14에 있는 경우)로 인해 정의되지 않아야 합니다.

업데이트: 위의 주의 링크에 따라 상태 비저장 구성 요소에서도 참조가 작동하지 않습니다.

React 버전 16.4 이후 업데이트

컨스트럭터 메서드에서 참조를 다음과 같이 정의합니다.

constructor(props) {
  super(props);
  this.russian = React.createRef();
}

사용 중인 렌더에서ref이렇게 해요.

<input
  name="russian"
  ref={this.russian} // Proper way to assign ref in react ver 16.4
/>  

예를 들어 컴포넌트 마운트 시 초점을 맞추고 싶은 경우

componentDidMount() {
  console.log(this.russian); 
  this.russian.current.focus();
 }

레퍼런스 매뉴얼 대응

폼 검증 방법에서 유사한 문제가 발생하여this.ref.current.reportValidity()

이 작업을 수행하던 방법을 다음과 같이 적습니다.validate = () => {}대신validate() {}도와줬는데 왜 그랬는지는 모르겠지만, 예전 직장생활 습관에서 기억나는 게 있어서 그런 것 같아요.이 답변이 도움이 되기를 바라며, 왜 이 답변이 정확히 효과가 있는지 누군가 설명해 줄 수 있기를 바랍니다.

Style로 클래스를 내보내는 경우 기본값을 제거하고 공칭으로 내보내십시오.

Console.log를 함수에 넣는 대신example(){...}안에 넣어야 합니다.

example=()=>{....}

언급URL : https://stackoverflow.com/questions/35230020/this-refs-something-returns-undefined