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
htmlbutton属性
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 repr 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 lea 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赋值：ElementById("Button").disabled = true;
参考资料：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。