在React中选择带有链接的选项

Question

我想在一个框架中打开一个pdf文件。当用户从选择标签中选择选项(pdf页面(时，pdf页面应出现在iframe标签.frame 中

<select id="EHealth" name="EHealth" className="optionsEHealth" required>
<option className="optionEHealth"></option>
<option value="vpn" className="optionStyle"><Link to={vpn} target="iframe-EH">VPN Form</Link></option>
</select>
<iframe name="iframe-EH" className="iframe-form" src="" 
height="1100rem" 
width="900rem" title="">
</iframe>

Answer 1

要在select选项中使用Link是无效的。它不会是超链接，也不会触发任何链接事件。因此，您应该在更改事件上使用select，然后在该更改事件集中使用iframe源。要获得dom节点访问权限，可以使用useRef

您可以将选项值设置为URL，然后将其设置到iframe中。

import { useRef } from "react";
export default function App() {
const ref = useRef();
return (
<div className="App">
<select
id="EHealth"
name="EHealth"
className="optionsEHealth"
required
onChange={(e) => {
ref.current.src = e.target.value ? e.target.value : "";
}}
>
<option className="optionEHealth"></option>
<option
value="https://images.unsplash.com/photo-1579353978004-434ec5670319?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80"
className="optionStyle"
>
VPN Form
</option>
<option
value="https://images.unsplash.com/photo-1612505890061-5235f9f9e3a9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80"
className="optionStyle"
>
Image
</option>
</select>
<br />
<br />
<iframe
ref={ref}
name="iframe-EH"
className="iframe-form"
src=""
height="1100rem"
width="900rem"
title="iframe-EH"
></iframe>
</div>
);
}