html标签属性为布尔值

在开发公司的一个内部系统时，用到了AntDesign框架。我要让Button在可点击和不可点击两种状态之间切换。

<Button disabled={true}>点击</Button>

结果我的Button标签确实不可点击了，但是eslint却报错如下：

error    Value must be omitted for boolean attributes  react/jsx-boolean-value

后来把代码给成这样：

<Button disabled=“disabled”>点击</Button>

eslint报错就消失了。

后来在Stack Overflow参考到了答案：

2.5.2 Boolean attributes

A number of attributes are boolean attributes. The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.

If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace.

The values "true" and "false" are not allowed on boolean attributes. To represent a false value, the attribute has to be omitted altogether.

*Note that this means that <div hidden="true"> is not allowed in HTML5.
Correct would be either <div hidden> or <div hidden=""> or <div hidden="hidden"> or case-insensitive and single quotes/unquoted variations of any of them.*

总结起来就是这样：
在不使用框架处理的情况下，给Button标签如下几种写法，都会使按钮不可点击：

<button disabled>click</button>
<button disabled="">click</button>
<button disabled="disabled">click</button>
<button disabled="任意字符串">click</button>

要让不可点击的按钮，回到点击状态有两种方式：

1. 通过JS移除disabled属性
2. 通过JS赋值：document.getElementById("Button").disabled = true;

参考资料：
链接1
链接2