在 ReactJS 中使用 onClick href

Question

As per Reactjs.org to handle event and prevent default use below code:

function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
  }
  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );
}

However, this also requires to add binding in constructor like:

this.handleClick = this.handleClick.bind(this);

I was able to get desired behaviour by below code:

<span>
  <a href="#" onClick={()=>doSomething(arg1,agr2)}>Click here</a>
</span>

Question: Which one is better option? It seems first one requires to use stateful component and second option can do the things irrespective of component being stateful or stateless.

Answer 1

Both options produce almost the same result. Since ActionLink is a stateless component, handleClick will be re-created and onClick reallocated. If you want to get the best performance, you can use a class, something like this:

class ActionLink extends React.Component () {
  handleClick = (e) => {
    e.preventDefault();
    console.log('The link was clicked.');
  };

  render() {
    return (
      <a href="#" onClick={this.handleClick}>
        Click me
      </a>
    );
  }
}

In this example. the handleClick is bound only once, and only the render method will be executed. You can also bind the handleClick in the constructor if you prefer. But the differences are so small that I would suggest you use the one you prefer and you find it clearer.

Answer 2

在页面加载时修复此重复函数调用的最佳方法是

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

Answer 3

There is a slight performance issue with ---the second--- both snippets. Every time you render that <a> tag the function in the onClick will be reallocated.

Here is a detailed post outlining all the ways to bind this in react. ( https://medium.com/@housecor/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56#.53op90a6w )

---

Edited. I misinterpreted the example code, it has the same issue of allocating the function on each render as the inline arrow function snippet. Refer Vincent D'amour 's accepted answer.

Answer 4

就我而言，如果我有href="#"无论如何我都会被重定向，所以我像这样离开了我的链接/按钮：

<a href="" role="button" onClick={this.myAction}>Click here</a>

Answer 5

I think you should bind with current object. let it try. refer the following example:

<a href="#" onClick={this.handleclick.bind(this)}>click me</a>

Answer 6

using this code will produce a warning

<a href="#" onClick={() => action()}>Link</a>

there is a workaround this by following react cli advice and it is that if you cannot provide a valid link address with HTTP: etc to change your tag to a button. It is possible to make a button look like a link with pure CSS. here is the example.

step one create the button styles

const buttonToLink = {
        fontSize: '1em',
        textAlign: 'left',
        color: 'blue',
        background: 'none',
        margin: 0,
        padding: 0,
        border: 'none',
        cursor: 'pointer'
     
    }

step 2 add the styles to the button

<button style={buttonToLink} onClick={() => action()}> This link has no warning</button>

Please note that "action()" is the function we want the button to follow.