反應在屏幕的一半上展開卡片

Question

我有一個React應用程序，我想要屏幕左側的小卡列表，然后選擇卡片時，屏幕右側的擴展卡顯示了該選擇。 我不確定要為onClick放什么

import SplitPane from 'react-split-pane';

export default class Selections extends React.Component {
  showCard(element) {
    var value = element.value;
    document.getElementById(value).style.display = "block";
  }

  render() {
    return (
      <>
        <SplitPane split="vertical" minSize={300}>
           <div className="card">
             <img src={image_here} />
             <div className="card-body">
               <h5 className="card-title">Item 1</h5>
               <button onClick={showCard} value="item1">See More</button>
             </div>
           </div>
           <div className="card">
             <img src={image_here} />
             <div className="card-body">
               <h5 className="card-title">Item 2</h5>
               <button onClick={showCard} value="item2">See More</button>
             </div>
           </div>
       {/*this div is the right half to show the bigger cards */}
           <div>
              <div className="card">
                <img src={image_here} />
                <div className="card-body">
                  <h5 className="card-title">Item 1 More Info</h5>
                  <p>lorem ipsum....</p>
                </div>
              </div>
              <div className="card">
                <img src={image_here} />
                <div className="card-body">
                  <h5 className="card-title">Item 2 More Info</h5>
                  <p>lorem ipsum....</p>
                </div>
              </div>
           </div>
        </SplitPane>
      </>
    )
  }
}

我在 CodePen 中附加了一個演示來測試卡片按鈕。

卡片分屏

Answer 1

不是一個完整的答案，但有幾件事很突出：我認為你的意思是 onClick 不是 onSelect https://reactjs.org/docs/handling-events.ZFC35FDC70D5FC69D269883A822C7A

此外，這樣的事件將采用事件 arg，而不是元素。 https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Event_handlers

我會將此作為評論，但我沒有代表！