react如何操作每一張card

react react-hooks material design javascript

shrine90459 2021-02-16 23:54:05 ‧ 1844 瀏覽

分享至

我現在有很多資料然後用map的方式把資料取出
如下會有很多張卡片(我是用material-ui的card)

點擊打開

現在有一個問題是我按下去後每一張卡片都會被打開
請問如果我想只打開某一張卡片的內容該怎麼做呢

  const [expanded, setExpanded] = React.useState(false);

  const handleExpandClick = () => {
    setExpanded(!expanded);
  };

        <IconButton
          className={clsx(classes.expand, {
            [classes.expandOpen]: expanded,
          })}
          onClick={handleExpandClick}
          aria-expanded={expanded}
          aria-label="show more"
        >

上面是文件提供的程式碼

froce iT邦大師 1 級 ‧ 2021-02-17 08:41:30 檢舉

你 expanded 是一個共通變數（state）吧？
簡單一點是去檢查class裡有沒有 expandOpen 這個 className。
一樣寫在 handleExpandClick 裡就好。

react我不熟，實際的code請自己寫。

vincentTang iT邦新手 5 級 ‧ 2021-02-17 13:57:32 檢舉

感覺是structure 的問題
你應該要list.map(<Card />)
然後再在Card 內的useState update吧

如果你已經是這樣, 那可以試試<Card /> 內加key attribute
e.g. <Card key={id} />

中文不好的話抱歉. 我是香港的.

Luis-Chen iT邦新手 4 級 ‧ 2021-02-17 22:10:03 檢舉

vincent 的是最佳解

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

3 個回答

Floralt 昀翰

iT邦新手 4 級 ‧ 2021-02-17 08:49:47

雖然我沒寫 react 但這個問題我覺得十之八九要用 id 解
請指定要觸發的 id

回應 1
分享
檢舉

froce iT邦大師 1 級 ‧ 2021-02-17 09:14:53 檢舉

不用，這不需要用id。
在前端框架中要用到id去解通常是沒辦法的時候。

登入發表回應

froce

iT邦大師 1 級 ‧ 2021-02-17 09:28:41

大概會是像下面的樣子，實際上能不能動我不清楚，但大致上就是透過傳遞event去取得目前點擊的class裡有沒有"expandOpen"這個class

  const [expanded, setExpanded] = React.useState(false);

  const handleExpandClick = (e) => {
    const expandedState = e.target.className.includes("expandOpen")
    setExpanded(!expandedState);
  };

        <IconButton
          className={clsx(classes.expand, {
            [classes.expandOpen]: false,
          })}
          onClick={handleExpandClick(e)}
          aria-expanded={false}
          aria-label="show more"
        >

熟悉react的應該可以用 bind 和 this 來解。