Question

在我的React应用程序中，我有href属性的链接（需要在右键单击链接后在新窗口中打开链接）并且链接元素是反应onClick方法。

参见此处的示例：

class SomeComponent extends React.Component { 
  handleClick(event) {
  	alert('click. but dont redirect...');
    
    return false;
    event.preventDefault();
    event.stopPropagation();
  }
  render() {
    return (
      <a href="test" onClick={this.handleClick}>Test link</a>
    );
  }
}

ReactDOM.render(<SomeComponent/>, document.getElementById('container'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container">
</div>

点击链接。 onClick方法调用，没关系，但浏览器会重定向到页面，在href属性中，我不知道，我该如何阻止它。

可以在React中与href属性和onclick方法建立链接，而无需重定向到href attr中的页面吗？

Fiddle

Answer 1

在您的href尝试使用＆＃34; javascript：void（0）;＆＃34;

Answer 2

你快到了!!!! 你只需要移动

event.preventDefault();
event.stopPropagation();

向上。它会起作用!!!!。

请查看以下代码。粘贴它。

class SomeComponent extends React.Component { 
  handleClick(event) {
    event.preventDefault();
    event.stopPropagation();
    alert('click. but dont redirect...');

    return false;

  }
  render() {
    return (
      <a href="test" onClick={this.handleClick}>Test link</a>
    );
  }
}

ReactDOM.render(<SomeComponent/>, document.getElementById('container'));

与href无效的onClick方法od链接

2 个答案: