Question

如何在没有URL的情况下使用onClick回调函数创建链接的正确/标准方法是什么？

<a href="#" onClick={this.handleClick}>click me!</a>

或没有href，但是链接在视觉上无法点击：

<a onClick={this.handleClick}>click me!</a>

我读过的所有教程都使用了除<a>之外的其他元素 - 可点击<span>，<div>等，但我想使用<a>。

Answer 1

您可以为cursor: pointer;设置链接以实现真实网址链接的行为：）

<a onClick={this.handleClick} style={{cursor: 'pointer'}}>click me!</a>

Answer 2

href="javascript:void(0)"优于href="#"。

href="#"会导致网址更改。

Answer 3

import { withRouter } from 'react-router-dom';
import Button from '../../components/CustomButtons/Button';

 onRegister = () => {
    this.props.history.push('/signupAsTeacher');
  };
<Button onClick={this.onRegister}> Contact Us </Button>

export default withRouter(functionName);

您必须首先使用Router导入。然后，您应该将页面路径提供给按钮单击事件。最后一个是使用路由器导出。

Answer 4

Eslint说要使用按钮：

[eslint]用作按钮的锚点。主要希望锚点能够导航。请改用button元素。 [错误]

<button
    type="button"
    onClick={this.onBtnClick.bind(this, key)}
>
    {link[key]}
</button>

Answer 5

对于REACT中的锚标记，如果我们想使用onClick而不更改URL，则可以使用以下

<a
    style={{ cursor:"pointer" }}
    href={null}
    onClick={() =>
                  this.toggleModal("Rental Objects With Current Rent")
                }
 >
Click Me
</a>

OR

<a
        style={{ cursor:"pointer" }}
        href={void (0)}
        onClick={() =>
                      this.toggleModal("Rental Objects With Current Rent")
                    }
     >
    Click Me
    </a>

注意：我们也可以在CSS文件中使用cursor：pointer代替

a:not([href]):not([tabindex]){
  cursor: pointer;
  color: #0086ce;
}

如何使用onClick处理程序在React组件中创建链接？

5 个答案: