标签属性disabled selected checked等布尔类型赋值不生效？

设置了false实际是true

    
      1
      2
      3
      4
    

以上的代码实际上select默认选中4

其实无论你让selected=0 selected=false selected=none 等等，这里都被认为是设置为true
因为在原生的html中，所有属性的赋值其实都是一个字符串，对布尔属性赋值字符串，会被强制转化为布尔值，所以"false" =>true “0” => true …

所以从某种意义上，我们只有利用js或者jquery对其进行赋予布尔值
这样被默认选中的是第4个

 
   1
   2
   3
   4
 

 var option4 = document.getElementById("option4")
 option4.selected = true

设置false被认为无效，默认选择3

      
        1
        2
        3
        false}>4
      

设置undefined实际上就是false，最终默认选择3

      
        1
        2
        3
        undefined}>4
      

当然也可以设置表达式来判断，默认选择4

import React, { useState } from "react";
import { Link } from "react-router-dom";
const Login: React.FC = () => {
  const [options, setOptions] = useState([1, 2, 3, 4])
  return (
    

      Home

      
        {
          options.map((item) => {
            return item} selected={item === 4} >
              {item}
            
          })
        }
      
    
  );
}

export default Login;

但是这样可能会报一个警告 react-dom.development.js:86 Warning: Use the defaultValue or value props on instead of setting selected on .
意思就是让你直接在select标签设置value或者defaultValue而不是给option设置selected

这样默认选中的就是2

import React, { useState } from "react";
import { Link } from "react-router-dom";
const Login: React.FC = () => {
  const [options, setOptions] = useState([1, 2, 3, 4])
  return (
    

      Home

      2}>
        {
          options.map((item) => {
            return item} >
              {item}
            
          })
        }
      
    
  );
}

export default Login;

只有第4个input被禁用

import React, { useState } from "react";
import { Link } from "react-router-dom";
const Login: React.FC = () => {
  const [options, setOptions] = useState([1, 2, 3, 4])
  return (
    

      Home

        {
          options.map((item) => {
            return item} disabled={item === 4} />
          })
        }
    
  );
}

export default Login;

只有第4个checkbox被选中

import React, { useState } from "react";
import { Link } from "react-router-dom";
const Login: React.FC = () => {
  const [options, setOptions] = useState([1, 2, 3, 4])
  return (
    

      Home

        {
          options.map((item) => {
            return item} checked={item === 4} />
          })
        }
    
  );
}

export default Login;

所有的input都不是read模式，可以正常输入

import React, { useState } from "react";
import { Link } from "react-router-dom";
const Login: React.FC = () => {
  const [options, setOptions] = useState([1, 2, 3, 4])
  return (
    

      Home

        {
          options.map((item) => {
            return item} readOnly={false} />
          })
        }
    
  );
}

export default Login;

经过多种布尔值的测试，react中布尔值属性表现保持一致

单独设置为false，其实为true。实际上默认选中的是3

 
   1
   2
   3
   4
 

如果通过data属性的方式，可以实现false的传值，默认选中的是3

  1
  2
  3
  4


export default class Home extends Vue {
  selected1 = false
}

当然判断式也是可以的，一般选择===的方式判断，默认选中第2个

  
    {{ item }}
  

export default class Home extends Vue {
  options = [1, 2, 3, 4]
}

只有第二个input被禁用了

export default class Home extends Vue {
	options = [1, 2, 3, 4]
}

全部false生效 都没被禁用

全部true生效 都被禁用

checked disabled readonly 基本所有的布尔类型表现都是如此