eslint / eslint-plugin-react: <form action="Javascript:void(0)" > - no-script-url error

Question

I have a component with a form:

< form action="javascript:void(0)" onSubmit={this.join}>

Eslint is complaining:

error Script URL is a form of eval no-script-url

Note: I am also using "eslint-plugin-react"

How can I relax this rule or what would be an alternative to the javascript void function?

Answer 1

I was having just this problem and then saw this pattern in the official Redux docs and it made a lot of sense to me:

<a
  href=""
  onClick={e => {
    e.preventDefault()
    onClick()
  }}
>
  {children}
</a>

Source

That's what I'll be doing from now on.

Answer 2

我禁用了它：

"no-script-url": 0

Answer 3

Actually it is wrong to disabled it, because javascript: is like eval for browser, and eval is evil as people know.

Alternatively, you don't need to put action prop. preventDefault in your join method instead. For example;

function join(e){
  e.preventDefault();
  //...
}

Answer 4

e.preventDefault() change with javascript:void(0)

<form action={
    e => {
        e.preventDefault()
    }
} onSubmit={this.join}>
 //...   
</form>

Or add rule in package.json file

"eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    "rules": {
       //...
      "no-script-url": "off",
       //...
    }
  },