React中带链接的Select选项：实现iframe加载PDF

你的原代码里在<option>里嵌套<Link>是行不通的——浏览器不会解析option内部的链接标签，而且这种方式也不符合select控件的交互逻辑。要实现选择选项后在指定iframe加载PDF，得用onChange事件来处理。

方案1：原生JavaScript实现 #

如果是纯前端项目，直接通过DOM操作修改iframe的src：

<select id="EHealth" name="EHealth" class="optionsEHealth" required>
  <option value="">请选择表单</option>
  <option value="/path/to/vpn-form.pdf" class="optionStyle">VPN Form</option>
  <!-- 可添加更多PDF选项 -->
</select>

<iframe name="iframe-EH" class="iframe-form" src="" height="1100rem" width="900rem" title="PDF预览框"></iframe>

<script>
  const selectEl = document.getElementById('EHealth');
  const iframeEl = document.querySelector('iframe[name="iframe-EH"]');

  selectEl.addEventListener('change', function() {
    const selectedPdfUrl = this.value;
    iframeEl.src = selectedPdfUrl || '';
  });
</script>

方案2：React项目实现 #

如果是React项目，用状态管理iframe的src更符合React数据流：

import { useState } from 'react';

function PdfSelector() {
  const [selectedPdf, setSelectedPdf] = useState('');

  const handleSelectChange = (e) => {
    setSelectedPdf(e.target.value);
  };

  return (
    <>
      <select 
        id="EHealth" 
        name="EHealth" 
        className="optionsEHealth" 
        required
        onChange={handleSelectChange}
        value={selectedPdf}
      >
        <option value="">请选择表单</option>
        <option value={vpn} className="optionStyle">VPN Form</option>
        {/* 可添加更多PDF选项 */}
      </select>

      <iframe 
        name="iframe-EH" 
        className="iframe-form" 
        src={selectedPdf} 
        height="1100rem" 
        width="900rem" 
        title="PDF预览框"
      ></iframe>
    </>
  );
}

export default PdfSelector;

关键说明 #

• 把PDF的直接访问路径作为option的value，选择时直接获取目标URL
• 通过onChange事件监听选择变化，动态更新iframe的src属性
• 保留空选项作为默认状态，既提示用户选择，也能在未选时清空iframe内容

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