一个包装中的链接和选择下拉列表导致无法选择

Question

我是react js的新手。这里我有以下代码，

<Link to='/test/1'>
<div>
// Here I have my select component as well  
</div>     
</Link>

现在，当我试图从下拉列表中选择该元素时，由于Link的原因，无法导航。那么，即使有链接，我该如何进行选择，并且该select必须在Link标签中，因为它是该div的包装器。

Answer 1

您可以捕获select上的点击事件并阻止其默认操作：

<Link to='/test/1'>
<div>
<select onClick={e => e.preventDefault()}>
<option>something</option>
</select>
</div>     
</Link>

这将阻止单击事件打开链接。

如果你想把它推广到链接中的几个不同元素上，你可以创建一个包装组件：

export const PreventDefaultClick = ({children}) => {
return (
<div onClick={e => e.preventDefault()}>
{children}
</div>
)
}

你会这样使用它：

<Link to='/test/1'>
<div>
<PreventDefaultClick>
<select>
<option>something</option>
</select>
</PreventDefaultClick>
</div>     
</Link>

以下是一些工作代码：

const PreventDefaultClick = ({children}) => {
return (
<div onClick={e => e.preventDefault()}>
{children}
</div>
)
}
const App = () => {
return (
<a href='https://example.com'>
<PreventDefaultClick>
<select>
<option>one</option>
<option>two</option>
</select>
</PreventDefaultClick>
<p>clicking here will still open the link</p>
</a>
)
}
ReactDOM.render(<App />, document.querySelector("#app"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id='app'>
</div>