在React中,如何设置点击href什么都不做？

Question

我有以下html元素:

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

我需要href属性,因此bootstrap使用链接样式(颜色,光标)对元素进行样式设置.

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

谢谢

Answer 1

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

• 在 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 2

你应该从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 3

您应该考虑在react组件中写入方法clickHappens，而不是直接编写此内联代码。希望它能起作用！

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