페이지에서 여러 번 사용되는 반응 구성 요소에 고유 한 단추를 동적으로 렌더링합니다.

Question

반응이 새로 생겨서 부트 캠프 용 프로젝트를 만들어야하는데 렌더링 할 모든 동영상 구성 요소를 가져 오는 데 문제가 있습니다. 개별 버튼이 있습니다. 버튼 하나를 클릭 할 때마다 페이지의 나머지 버튼도 클릭 한 것처럼 작동합니다. 다음은 호출되는 내 영화 구성 요소입니다. 구성 요소의 첫 번째 행과 버튼이 왼쪽 하단 모서리의 녹색 행입니다. https://files.slack.com/files-pri/T571CRHGE-F826BKX7S/api.png.

importReact, { Component} from"react"; 
importAPIfrom"../utils/API" 
classMovieextendsComponent{ 

constructor(){ 
    super(); 
    this.state={ 

     color:'green', 
     icon:'add', 
     result:[] 
    }; 
} 

componentDidMount() { 
    this.topMovies(); 
} 

topMovies=() =>{ 
    API.topMovies() 
    .then(res=>this.setState({ result:res.data.results})) 
    .catch(err=>console.log(err)); 
} 

handleClick=event=>{ 
    if(this.state.color==='green'){ 
     this.setState({color:'red'}); 
    } else{ 
     this.setState({color:'green'}); 
    } 

    if(this.state.icon==='add') { 
      this.setState({icon:'remove'}); 
    } else{ 
      this.setState({icon:'add'}); 
    } 
} 

render() { 
    constimgURL="https://image.tmdb.org/t/p/w300/" 

    return(
     <div> 
       { 
        this.state.result.map((movieList) =>(

        <div className="col s4 movieBox"> 
         <div className="card"> 
          <div className="card-image"> 
           <img src={imgURL +movieList.poster_path} /> 
           <span className="card-title"><a id={this.state.color} onClick={this.handleClick} className="btn-floating btn waves-effect waves-light"><i className="material-icons">{this.state.icon}</i></a></span> 
          </div> 
          <div className="card-content movieInfo"> 
           <p>Title:{movieList.title}</p> 
           <p>Genre:{movieList.genre_ids}</p> 
           <p>Rating:{movieList.vote_average}</p> 
          </div> 
         </div> 
       </div> 
       )) 
      } 

     </div> 
    ) 
} 
} 
exportdefaultMovie; 

Answer 1

당신은 생성자 내에서 (사실 모든 기능을)를 handleClick 기능을 결합해야합니다

이

constructor(){ 
    super(); 
    this.state={ 

     color:'green', 
     icon:'add', 
     result:[] 
    }; 
    this.handleClick = this.handleClick.bind(this); 
} 

Answer 2

의 onclick는 = {() => this.handleClick()}도 작동합니다.

Answer 3

.map()은 배열의 각 요소에 대해 제공된 콜백을 호출합니다. 즉, 이는 각 요소에서 동일한 이벤트를 실행할 여러 단추를 작성한다는 의미입니다. onClickEvent를 처리하는 행 구성 요소를 만든 다음 구성 요소에 ID를 전달하거나 줄 화살표 함수() => this.handleClick()을 사용할 수 있습니다. (클릭 할 때마다 익명의 함수가 만들어지며 큰 응용 프로그램에서는 성능이 저하 될 수 있지만 행 구성 요소를 만들지 않으려는 경우에는 유용 ​​할 수 있습니다)

고유 ID를 갖는 키가 중요합니다. https://coderwall.com/p/jdybeq/the-importance-of-component-keys-in-react-js

희망이 있습니다.