렌더링 시 onClick이 호출되는 이유는 무엇입니까? - React.js

렌더링 시 onClick이 호출되는 이유는 무엇입니까? - React.js

작성한 컴포넌트가 있습니다.

class Create extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    var playlistDOM = this.renderPlaylists(this.props.playlists);
    return (
      <div>
        {playlistDOM}
      </div>
    )
  }

  activatePlaylist(playlistId) {
    debugger;
  }

  renderPlaylists(playlists) {
    return playlists.map(playlist => {
      return <div key={playlist.playlist_id} onClick={this.activatePlaylist(playlist.playlist_id)}>{playlist.playlist_name}</div>
    });
  }
}

function mapStateToProps(state) {
  return {
    playlists: state.playlists
  }
}

export default connect(mapStateToProps)(Create);

내가 할 때render이 페이지,activatePlaylist각각에 대해 호출됩니다.playlist내 안에서map내가 만약bind activatePlaylist예를 들어 다음과 같습니다.

activatePlaylist.bind(this, playlist.playlist_id)

어나니머스 기능도 사용할 수 있습니다.

onClick={() => this.activatePlaylist(playlist.playlist_id)}

예상대로 되는군요.왜 이런 일이 일어날까요?

에 패스해야 합니다.onClick 기능에 대한 참조, 이렇게 할 때activatePlaylist( .. )함수를 호출하여 로 전달합니다.onClick반환된 가치activatePlaylist. 다음 세 가지 옵션 중 하나를 사용할 수 있습니다.

1. 사용방법.bind

activatePlaylist.bind(this, playlist.playlist_id)

2. 화살표 기능 사용

onClick={ () => this.activatePlaylist(playlist.playlist_id) }

3. 또는 에서 함수를 반환한다.activatePlaylist

activatePlaylist(playlistId) {
  return function () {
     // you code 
  }
}

이 투고는 이미 몇 년 전의 것으로 알고 있습니다만, 이 일반적인 실수에 관한 최신 React 튜토리얼/설명(저도 작성했습니다)을 참조해 주세요.https://reactjs.org/tutorial/tutorial.html:

메모

입력을 저장하고 혼란을 피하기 위해 아래 이벤트핸들러에 화살표 함수 구문을 사용합니다.

class Square extends React.Component {
 render() {
   return (
     <button className="square" onClick={() => alert('click')}>
       {this.props.value}
     </button>
   );
 }
}

onClick={() => alert click'}을(를) 사용하면 함수를 onClick 소품으로 전달할 수 있습니다.React는 클릭 한 번 후에만 이 함수를 호출합니다.() = > 를 잊어버리고 onClick={alert('click')} 라고 쓰는 것은 일반적인 실수이며 컴포넌트가 다시 켜질 때마다 경고가 발생합니다.

이 동작은 React가 클래스 기반 컴포넌트의 릴리스를 발표했을 때 입증되었습니다.

https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html

자동 바인딩

React.createClass에는 모든 메서드를 자동으로 바인드하는 매직 기능이 내장되어 있습니다.이는 다른 클래스에서 이 기능에 익숙하지 않은 JavaScript 개발자들에게는 조금 혼란스러울 수 있으며 React에서 다른 클래스로 이동할 때 혼란스러울 수 있습니다.

그래서 우리는 이것을 React 클래스 모델에 짜넣지 않기로 했습니다.원하는 경우 생성자에서 메서드를 명시적으로 프리바인드할 수 있습니다.

import React from 'react';
import { Page ,Navbar, Popup} from 'framework7-react';

class AssignmentDashboard extends React.Component {
    constructor(props) {
      super(props);
      this.state = {

    }

    
      onSelectList=(ProjectId)=>{
          return(

            console.log(ProjectId,"projectid")
          )

      }
            
render() {
       
    return (   
      
 <li key={index} onClick={()=> this.onSelectList(item.ProjectId)}></li>
                       
                       )}

당신이 그 방법을 통과시키는 방법this.activatePlaylist(playlist.playlist_id)는 즉시 메서드를 호출합니다.이 메서드의 참조를onClick이벤트. 아래 중 하나의 구현에 따라 문제를 해결하십시오.

1.

onClick={this.activatePlaylist.bind(this,playlist.playlist_id)}

여기서 바인드 속성은 의 참조를 작성하기 위해 사용됩니다.this.activatePlaylist패스 방식this문맥과 논거playlist.playlist_id

2.

onClick={ (event) => { this.activatePlaylist.(playlist.playlist_id)}}

그러면 onClick 이벤트에 함수가 연결되며 사용자 클릭 작업 시에만 트리거됩니다.이 코드가 외부로 전송될 때this.activatePlaylist메서드가 호출됩니다.

언급URL : https://stackoverflow.com/questions/34226076/why-is-my-onclick-being-called-on-render-react-js