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