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

Question

我有以下 html 元素：

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

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

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

Answer 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>
      ...
    )

Answer 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 以及删除它的行为的复杂性）。因此，不要使用锚标记作为按钮，而是使用按钮元素本身。希望有道理。

Answer 3

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

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

Answer 4

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

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

Answer 5

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

替换了 标记

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

Answer 6

使用<button>

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

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

Answer 7

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

import React from "react";

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

Answer 8

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

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

Answer 9

试试这个代码；

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

Answer 10

添加 javscript:void(0):

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

Answer 11

fields.push()}>添加邮箱

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

Answer 12

试试下面的代码sn-p

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