javascript - 一个包装器中的链接和选择下拉菜单导致无法选择

Question

我是反应js的新手。在这里，我有以下代码。,

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

现在，当我当时试图从下拉列表中选择该元素时，由于Link. 那么，即使有一个链接，我该如何选择它，并且该选择必须在 Link 标记中，因为它是该 div 的包装器。

标签： javascriptreactjs

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>