在 React 中，如何使锚点在点击时不执行任何操作？

Posted 2023-02-22

【中文标题】在 React 中，如何使锚点在点击时不执行任何操作？

【英文标题】：In React, how can I cause anchors to do nothing on click?

【发布时间】：2017-12-03 22:37:21

【问题描述】：

我有以下 html 元素：

<a href onClick=() => fields.push()>Add Email</a>

我需要 href 属性，以便引导程序使用链接样式（颜色、光标）设置元素的样式。

问题是，如果我现在单击它会导致浏览器重定向。如何更新上述内容以不重定向浏览器 onClick 但仍运行 fields.push()？

【问题讨论】：

试试<a href='#' onClick=... ></a>

这仍然会导致页面刷新..也许这是一个反应 - idk

【参考方案1】：

您应该像这样从 onClick 事件调用 preventDefault 函数：

class App extends React.Component 
  onClick = (e) => 
    e.preventDefault()
    console.log('onclick..')
  
  render() 
    return (
      <a href onClick=this.onClick >Click me</a>
    )
  

您可以针对您的用例使用类似的东西：

    const renderEmails = ( fields ) => (
      ...
      <a href onClick=(e) => 
        e.preventDefault()
        fields.push()
      >Add Email</a>
      ...
    )

【讨论】：

谢谢，但这是在 FieldArray 中，如下所示：redux-form.com/6.0.0-rc.1/examples/fieldArrays

我不确定是否可以在 FieldArray 中执行此建议

我认为您正在以 redux-form 呈现数组类型字段。对吗？

这不起作用。我收到一个错误Received true for a non-boolean attribute href

【参考方案2】：

这是一个简单的解决方案，

关于 React 类组件

class App extends React.Component 
  onClick() 
    console.log('onclick..')
  

  render() 
    return (
      <a href=void(0) onClick=this.onClick >Click me</a>
    )
  

React 正在放弃 javascript:void(0) 解决方案，并且 href 肯定不接受空属性值。

基本上，react 想要我们做的是使用不同的组件，例如按钮。我们总是可以使用 CSS 使按钮看起来像一个链接（因此，不会包含 href 以及删除它的行为的复杂性）。因此，不要使用锚标记作为按钮，而是使用按钮元素本身。希望有道理。

【讨论】：

这是最干净的解决方案，它还支持通过内联三元选择性排空。

很高兴为您提供帮助。 :)

这不起作用。 href 属性在编译期间被完全删除。

@RadonRosborough 你读过上面的问题了吗？这里的目标是创建一个在单击时不执行任何操作的链接。使用上述解决方案不会在控制台上产生任何错误并按预期工作。但这不是一个故障安全的解决方案。我也为此提出了一个实际的解决方案，使用按钮并将其转换为具有 CSS 样式的锚标记。

如果我正确理解了这个问题，目标是创建一个不执行任何操作但看起来仍然像一个链接的链接。如果删除了 href 属性，则链接不再看起来像链接。我会注意到，将按钮修改为链接是quite complicated，我不会在生产中使用它。

【参考方案3】：

您应该考虑在 react 组件中编写方法 clickHappens 而不是内联编写此方法。希望它有效！

<a href onClick=(e) => e.preventDefault(); fields.push()> Add Email </a>

【讨论】：

谢谢，但这给了控制台消息72:5 warning Nested block is redundant no-lone-blocks

这不起作用。我收到一个错误Received true for a non-boolean attribute href

【参考方案4】：

将e.preventDefault()添加到onClick并添加href="#"属性

<a href="#" onClick=(e) =>  e.preventDefault(); fields.push(); >Add Email</a>

【讨论】：

请不要只发布代码作为答案，还要解释您的代码的作用以及它如何解决问题的问题。带有解释的答案通常更有帮助，质量更高，更有可能吸引投票。

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review

【参考方案5】：

使用 Ritesh 的答案，但没有“非布尔属性 href 接收为真”的问题，我只是用

替换了 标记

class App extends React.Component 
  onClick = (e) => 
    e.preventDefault()
    console.log('onclick..')
  
  render() 
    return (
      <span onClick=this.onClick>Click me</span>
    )
  

【参考方案6】：

使用<button>

button 
  background: none!important;
  border: none;
  padding: 0!important;
  color: #069;
  text-decoration: underline;
  cursor: pointer;

<button type="button"> My link </button>

【讨论】：

最好是 <button type="button"> 这样它就不会意外提交表单。

【参考方案7】：

只需像这样制作一个自定义组件；

import React from "react";

export default function Link( to, className, children ) 
  return (
    <a
      href=to
      className=className
      onClick=(e) => 
        e.preventDefault();
      
    >
      children
    </a>
  );

【参考方案8】：

URL 中没有“#”； 无需拨打e.preventDefault(); 简单~

 <a href=void(0) onClick=()=>console.log('...')>

【讨论】：

它的工作，但反应说它的安全漏洞

【参考方案9】：

试试这个代码；

<a href=undefined onClick=() => /*function code*/></a>

【讨论】：

虽然这段代码 sn-p 可以解决问题，但它没有解释为什么或如何回答这个问题。请include an explanation for your code，因为这确实有助于提高您的帖子质量。请记住，您是在为将来的读者回答问题，而这些人可能不知道您提出代码建议的原因。

【参考方案10】：

添加 javscript:void(0):

<a href="javascript:void(0);" onClick=() => fields.push()>Add Email</a>

【讨论】：

谢谢，但这会导致 js 控制台消息 50:21 warning Script URL is a form of eval no-script-url

这是唯一可行的解​​决方案，但我收到警告A future version of React will block javascript: URLs as a security precaution. Use event handlers instead if you can，所以它可能很快就会停止工作。

【参考方案11】：

fields.push()>添加邮箱

在 TypeScript 中 href="javascript:void(0);" 会引发警告，因此还有其他方法可以跳过该警告

【参考方案12】：

试试下面的代码sn-p

<a href="true" ....>

【讨论】：

你能进一步解释一下吗？为什么指向 URL true 的链接应该有帮助？