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",
       //...
    }
  },