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

    原文作者:唐僧洗头爱飘柔
    原文地址: https://segmentfault.com/a/1190000013238465
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞