如何使用 React.js 将值传递给模态？答案

【问题标题】：How to pass value to modal using React.js?如何使用 React.js 将值传递给模态？
【发布时间】：2021-10-25 09:34:15
【问题描述】：

我有一个在.data.map().. 之后返回数据的表，如下所示：

{this.state.data.map((item, i) => { 
   return (div>
              <tr>
                  <td>{item.id}</td>
                  <td>{item.name}</td>
                  <td>{item.symbol}</td>

上面的<table> 和<tr> 中的<td> 使用以下代码显示我的模式：

<td>
    <div>
        <a className="btn" href="#open-modal" title="More Details">????</a>
        <div id="open-modal" className="modal-window">
        <div>
          <a href={url} title="Close" className="modal-close">❌</a>
          <div>Update Details</div>
            <label>{item.id}</label> //WHERE I WANT TO DISPLAY MY ID
        </div><a href={url}></a></div>
    </div>
</td>

现在，当我想在打开模式后显示每个特定行的 item.id 时，它返回数组中只有一项的 item.id，而不是实际的 item.id。

所以<td> 中的item.id 与模态中的item.id 不同。对于我单击的每一行，它都会返回相同的item.id。我怎样才能让这两个具有相同的值？

【问题讨论】：

您需要有一个状态来保存所选项目。并在您的模态内容中使用此状态的值。 {this.state.selectedItem.id}

标签： javascript arrays reactjs json

【解决方案1】：

模态框仅引用您渲染时的最后一个 id

我建议您有一个状态来存储您的 id 并在您打开模式时呈现它。

类似：

const [selectedId, setSelectedId] = useState();

<td>
    <div>
        <a
          className="btn"
          onClick={() => setSelectedId(item.id)}
          href="#open-modal" title="More Details"
        >?</a>
        <div id="open-modal" className="modal-window">
        <div>
          <a href={url} title="Close" className="modal-close">❌</a>
          <div>Update Details</div>
            <label>{selectedId}</label>
        </div><a href={url}></a></div>
    </div>
</td>

? 看起来很吓人。

【讨论】：