useButtonType

JSX and TSX

摘要

¥Summary

规则生效日期：v1.0.0

¥Rule available since: v1.0.0
诊断类别：lint/a11y/useButtonType

¥Diagnostic Category: lint/a11y/useButtonType
此规则为推荐规则，默认启用。

¥This rule is recommended, which means is enabled by default.
此规则没有修复方案。

¥This rule doesn’t have a fix.
此规则的默认严重级别为 error。

¥The default severity of this rule is error.
来源：

¥Sources:
- 与 react/button-has-type 相同
  
  ¥Same as react/button-has-type

如何配置

¥How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "a11y": {
5
        "useButtonType": "error"
6
      }
7
    }
8
  }
9
}

描述

¥Description

强制对元素 button 使用属性 type

¥Enforces the usage of the attribute type for the element button

示例

¥Examples

无效

¥Invalid

1
<button>Do something</button>

code-block.jsx:1:1 lint/a11y/useButtonType ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Provide an explicit type prop for the button element.
  
  > 1 │ <button>Do something</button>
      │ ^^^^^^^^
    2 │ 
  
  ℹ The default type of a button is submit, which causes the submission of a form when placed inside a `form` element. This is likely not the behaviour that you want inside a React application.
  
  ℹ Allowed button types are: submit, button or reset

1
<button type="incorrectType">Do something</button>

code-block.jsx:1:14 lint/a11y/useButtonType ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Provide a valid type prop for the button element.
  
  > 1 │ <button type=“incorrectType”>Do something</button>
      │              ^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ The default type of a button is submit, which causes the submission of a form when placed inside a `form` element. This is likely not the behaviour that you want inside a React application.
  
  ℹ Allowed button types are: submit, button or reset

1
React.createElement('button');

code-block.js:1:21 lint/a11y/useButtonType ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Provide an explicit type prop for the button element.
  
  > 1 │ React.createElement(‘button’);
      │                     ^^^^^^^^
    2 │ 
  
  ℹ The default type of a button is submit, which causes the submission of a form when placed inside a `form` element. This is likely not the behaviour that you want inside a React application.
  
  ℹ Allowed button types are: submit, button or reset

有效

¥Valid

1
<>
2
    <button type="button">Do something</button>
3
    <button type={buttonType}>Do something</button>
4
</>

useButtonType

摘要

如何配置

描述

示例

无效

有效

相关链接