onClick Link 在地图外部使用 JavaScript/React 中的映射值

Question

在 React 组件中映射值如下：

const [showBttn, setShowBttn] = useState(false);

{info
  .map(infoDetails => (
    <div className='card' onClick={() => showBttn(true)}>
      <p>{infoDetails.text}</p>
    </div>
  ))}

我希望能够单击每个项目并获取项目中映射的值并将其用作组件中另一个部分的 link，即 show/hidden [=元素的 14=]。

{showBttn && (
    <a
      href={
        URL + infoDetails.text
      }>
      <Button>My button</Button>
    </a>
}

Answer 1

添加一个状态来控制这个

const [infoSelected, setInfoSelected] = useState(false);

{
  info.map((infoDetails) => (
    <div
      className="card"
      onClick={() => {
        showBttn(true);
        setInfoSelected(infoDetails);
      }}
    >
      <p>{infoDetails.text}</p>
    </div>
  ));
}

{showBttn && (
    <a
      href={
        URL + infoSelected.text
      }>
      <Button>My button</Button>
    </a>
}

onClick Link 在地图外部使用 JavaScript/React 中的映射值

onClick Link Outside of Map Using Mapped Values in JavaScript/React

javascript

arrays

dom-events

reactjs