ページ上で何度も使用されている反応コンポーネントに、一意のボタンを動的にレンダリングします。

Question

私は新しいことに反応して、自分のブートキャンプのプロジェクトを作成する必要があります。個々のボタンがあります。 1つのボタンをクリックするたびに、ページ上の残りのボタンがクリックされたように動作します。ここに私のムービーコンポーネントが呼び出されています。 コンポーネントの最初の行とボタンは、左下隅の緑のボタンです。 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

あなたは、コンストラクタ内​​機能（実際にはすべての機能を）バインドする必要があります。

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

希望するものがあります。