select选择器组件（2）|青训营日记

这是我参与「第五届青训营 」伴学笔记创作活动的第 9天 今天把昨天的组件进行了修改，增加了样式，以及删除已选择项和disabled功能。

工作中遇到的问题

1 编码格式问题

• react中的 React.FC<OptionProps> =()中间需要打空格，不然无法解析，会解析成>=符号

2css位置问题

• 使用padding和margin来改变元素位置可能导致容器变大，可以用position:relative使得元素相对于原位置偏移

3 <span> 标签

• span标签是行内元素，width和height是无法设置的，但span是有display:inline-block和float属性的，只要设置了这两个属性，就会认为它是一个块级元素。

disabled功能

为了实现disabled属性，我将传入的disabled属性传入组件函数时转化成一个字符串

if(disabled==true){
        disabledselect = "trueselect"
    }else{
        disabledselect = "falseselect"
    }

之后将字符串赋值给select组件的className，作为样式变换

            <span>{useselectedItem.value}
            <button onClick={Delete}>{IsX}</button>
            </span>
            <span  className={Iconstyles}></span>
        </div>

scss文件，cursor: not-allowed;可以初步实现指针的禁止，但并未禁止点击

.trueselect{
    cursor: not-allowed;
    font-size: 14px;
    display:flex;
    padding:8px 16px;
    border:1.5px solid #818080;
    width: 200px;;
    justify-content: space-between;
    background-color:#ffffff00;
    border-radius: 5px;
    margin: auto;
    box-shadow: 0px 0px 3px 1px rgb(172, 172, 175) inset;
    color: #818080;
}
.falseselect{
    font-size: 14px;
    display:flex;
    padding:8px 16px;
    border:1.5px solid #3e3b3b;
    width: 200px;;
    cursor: pointer;
    justify-content: space-between;
    background-color:#ffffff00;
    border-radius: 5px;
    margin: auto;
    box-shadow: 0px 0px 3px 1px rgb(172, 172, 175) inset;
}

在onclick函数上做一个判断,只有disabled为false时才可以实现点击函数

const selectClick  = () => {
        if(disabled==false){
        setshowOptions(!showOptions);
        if(Iconstyles=="downangle")
            setIcon("upangle")
        else setIcon("downangle")}
    }

删除已选项

我选择使用一个x表示删除的图标，这是最简单的方法，在点击某个选项后，x就要出现，而在点击×后，select框中所选项目需要删除，就是把显示的选项内容变成placeholder

const [IsX,setIsX] = useState("") //是否有删除标志
//点击选项
const optionClick = (option:Option)=>{
        setuseSelectedItem(option);
        setshowOptions(!showOptions);
        setIcon("downangle")
        setIsX("x");
    }
    //点击删除
    const Delete = ()=>{
    setuseSelectedItem({label:"default",value:placeholder});
        setIsX("");
    }

图标上下三角形

我用的是border来生成上下箭头的图标

.downangle{
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-top: 8px #000000 solid;
    position: relative;
    top: 4px;
}
.upangle{
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid transparent;
    border-bottom: 8px #000000 solid;
    position: relative;
    bottom: 4px;
}

今日结果图 diabled = ture

diabled = false