React.js如何向模态框(modal)传值？点击表格行modal仅显示固定item.id问题咨询

问题根源 #

核心原因是 DOM ID全局唯一冲突：

• 你在map循环里给所有行的模态框都写死了相同的id="open-modal"，而HTML规范要求同一页面内DOM元素的id必须唯一
• 锚点跳转逻辑href="#open-modal"永远只会匹配页面中第一个出现的对应id的元素，所以不管点击哪一行的触发按钮，打开的都是第一行的模态框，自然每次展示的id都是固定值

修复方案 #

方案1：保持锚点跳转逻辑，给每个模态框生成唯一id #

把循环内的模态框id和触发锚点的href都和当前行的item.id绑定，保证全局唯一即可：

{this.state.data.map((item, i) => { 
   return (
    <tr>
        <td>{item.id}</td>
        <td>{item.name}</td>
        <td>{item.symbol}</td>
        <td>
          <div>
              <a className="btn" href={`#open-modal-${item.id}`} title="More Details">👁</a>
              <div id={`open-modal-${item.id}`} className="modal-window">
                <div>
                  <a href={`#`} title="Close" className="modal-close">❌</a>
                  <div>Update Details</div>
                  <label>{item.id}</label>
                </div>
              </div>
          </div>
        </td>
    </tr>
   )
})}

方案2（更推荐React场景使用）：用状态控制模态框显隐 #

不需要在循环内给每行都渲染一个模态框，全局只保留一个模态框，通过state控制显隐和绑定当前选中的行id，性能更优：

1. 先给state新增字段openModalId: null
2. 触发按钮点击时把当前行的id赋值给openModalId
3. 模态框根据openModalId判断是否展示，内容直接读取当前选中的id即可

// 模态框放在表格外层，全局仅渲染一次
{this.state.openModalId && (
  <div className="modal-window">
    <div>
      <a onClick={() => this.setState({openModalId: null})} title="Close" className="modal-close">❌</a>
      <div>Update Details</div>
      <label>{this.state.openModalId}</label>
    </div>
  </div>
)}

// 循环内的触发按钮修改为状态控制逻辑
<a className="btn" onClick={() => this.setState({openModalId: item.id})} title="More Details">👁</a>

内容的提问来源于stack exchange，提问作者Sedrick Nyanyiwa