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 = {（）=＆GT; this.handleClick（）}也可以。

Answer 3

.map（）为数组中的每个元素调用一个提供的回调函数。因此，这意味着您要创建几个按钮，这些按钮将在每个元素上执行相同的事件。我建议创建一个处理onClickEvent的行组件，然后你可以传递组件id或使用内联箭头函数（）=＆gt; this.handleClick（）。（这确实会在每次点击时创建一个匿名函数，并且可能对较大的应用程序的性能有害，但如果您不想创建行组件，则可以在您的情况下工作）

此外，您应该了解为什么使用具有唯一ID的键非常重要。 https://coderwall.com/p/jdybeq/the-importance-of-component-keys-in-react-js

希望有所帮助。

动态渲染在页面上多次使用的react组件上的唯一按钮

3 个答案: