eslint / eslint-plugin-react：<form action="Javascript:void(0)"> - 無腳本 url 錯誤</form>

Question

我有一個帶有表單的組件：

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

埃斯林特抱怨：

錯誤腳本 URL 是 eval no-script-url 的一種形式

注意：我也在使用“eslint-plugin-react”

我該如何放寬這條規則，或者什么可以替代 javascript void function？

Answer 1

我遇到了這個問題，然后在官方 Redux 文檔中看到了這種模式，這對我來說很有意義：

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

來源

這就是我從現在開始要做的事情。

Answer 2

我禁用了它：

"no-script-url": 0

Answer 3

實際上禁用它是錯誤的，因為javascript:就像瀏覽器的 eval 一樣，而眾所周知 eval 是邪惡的。

或者，您不需要放置action道具。 改為在您的join方法中使用preventDefault 。 例如;

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

Answer 4

e.preventDefault()更改為javascript:void(0)

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

或者在package.json文件中添加規則

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