时间戳

首页 > 解决方案 > React Hooks - 如何遍历动态创建的按钮以了解单击了哪个按钮？

javascript - React Hooks - 如何遍历动态创建的按钮以了解单击了哪个按钮？

问题描述

我有一组来自 API 的电影卡。当我单击电影时，会打开一个带有按钮的模式。由于有很多电影，我想知道单击了哪个按钮，以将该按钮的状态保留为 'Added to Watchlist'（如果单击）。我怎么能做到这一点？

标签： javascriptreactjsredux

解决方案

将电影名称/电影 ID 作为道具传递给按钮。Id 可以作为状态存储在父组件中。

//movieCard is API response

state = {
  movideId: '',
  isOpneModal: false,
}

openModal = (cardId) => setState({ movideId: cardId })

render() {
return (
    <Fragment>
      {movieCard.map(card => 
        <MovieCard cardDetails={card} onClick="()=>openModal(card.Id)") />
      )}

      {isOpneModal && <Modal movideId={this.state.movideId} />}
    </Fragment>
)

推荐阅读