React中如何实现勾选表格复选框后点击提交按钮才打开图片URL

• 表格行<tr>全局绑定了onClick事件，点击行内任意位置（包括复选框、文本单元格）都会直接触发handleRowClick，直接发请求打开图片链接，完全跳过了「勾选复选框、点击提交」的流程
• 复选框没有绑定状态同步逻辑，组件无法感知哪一行被勾选
• 提交按钮没有绑定任何点击处理逻辑，目前是无功能的空元素

• 移除表格行上的全局点击事件，从根源上避免点击行就触发请求的问题
• 在组件状态中存储用户勾选的行ID，仅通过复选框的交互更新这个状态
• 把发请求、打开图片的逻辑全部绑定到提交按钮的点击事件上，仅当用户完成「勾选行→点提交」的流程时才执行

1. 组件状态新增选中行的存储字段

state = {
  selectedRowId: null, // 记录当前勾选的行ID，未勾选时为null
  // 原有其他状态字段
};

2. 删掉表格行上绑定的行点击事件

// 原来的 <tr onClick={() => this.handleRowClick(row.id)} key={row.id}>
// 改成
<tr key={row.id}>

3. 给复选框绑定状态同步逻辑，实现勾选/取消勾选时更新组件状态

if(column == 'Select')
  return (
    <td>
       <input 
         type="checkbox" 
         checked={this.state.selectedRowId === row.id}
         onChange={(e) => {
           // 勾选时存当前行ID，取消勾选时重置为null
           this.setState({
             selectedRowId: e.target.checked ? row.id : null
           })
         }}
       />
    </td>
  );

4. 新增提交按钮的处理函数，把原来的请求、打开链接逻辑移到这里

handleSubmit = async () => {
  const { selectedRowId } = this.state;
  // 未勾选任何行时直接拦截，不发请求
  if (!selectedRowId) return;
  // 复用原来的接口请求逻辑
  const url1 = "https://grandiose-mulberry-garnet.glitch.me/query?id="+selectedRowId;
  const response = await fetch(url1);
  const res = await response.json();
  this.setState({ ...res });
  window.open(res.url, '_blank');
};

5. 给提交按钮绑定点击事件

// 原来的 <input type="submit" value="submit" />
// 改成
<input 
  type="submit" 
  value="submit" 
  onClick={this.handleSubmit}
/>

• 如果后续需要支持同时勾选多行打开多个图片，只需要把selectedRowId从单值改成数组类型，勾选时把行ID push到数组里，取消时从数组里删掉对应ID，提交时循环遍历数组逐行发请求打开链接即可
• 注意删掉单元格里原来的<a>标签，不然点击单元格内的文本链接会直接跳转，和预期的交互逻辑冲突

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