구성 요소를 업데이트 할 때 DOM 요소를 클릭하십시오

Question

componentDidMount 라이프 사이클 메소드에서 클릭 이벤트가 발생하는 구성 요소가 있습니다.

구성 요소의 렌더링이 트리거 될 때마다 div가 필요합니다.

내 문제는 componentDidMount 한 번만 발생하고 구성 요소가 다시 렌더링 될 때 클릭 이벤트가 발생하지 않는다는 것입니다.

click 이벤트가 작동하는 다른 라이프 사이클 메소드를 찾지 못했습니다.

다른 방법으로도 가능합니까?

크리크 방법 :

componentDidMount() { 
    this.setState({ 
     audioPlayer: ReactDOM.findDOMNode(this.refs.audio) 
    },() => { 
     this.state.audioPlayer.ontimeupdate =() => { this.timeUpdated() }; 
     this.state.audioPlayer.onprogress =() => { this.progressUpdated() }; 
     if(this.props.playing) { 
     this.divElement.click(); 
     } 
    }); 
    } 

참조하는 사업부 :

<div className='player__control__icons--play'> 
    <div ref={div => this.divElement = div} className='player__control__icon' onClick={this.togglePlay.bind(this)}> 
     <Play /> 
    </div> 
    {skipButtons} 
</div> 

Answer 1

나는 모두 componentWillReceiveProps 및 componentDidUpdate 캔 액세스 심판 (첫 번째 상점에 대한 100 % 확신) 생각합니다. componentWillReceiveProps은 소품이 실제로 변경되었는지 쉽게 확인합니다. 당신이 정말로 기본 클릭 이벤트에 의존하지 않는

componentWillReceiveProps (nextProps) { 
    if (!this.props.playing && nextProps.playing) { 
    this.divElement.click(); 
    } 
} 

https://developmentarc.gitbooks.io/react-indepth/content/life_cycle/update/component_will_receive_props.html

는 또한 (!) 참고로, 귀하의 경우 this.togglePlay에 직접 클릭 핸들러를 호출하는 것이 청소기입니다. 다시 말하지만,이 함수의 구현을 모르므로 어떤 이유로 클릭 이벤트가 필요할 수도 있지만 대부분의 경우 실제로 필요하지는 않습니다.