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