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

这是我参与「第五届青训营 」伴学笔记创作活动的第 8天

在tsx中引入scss文件有两种方法：

1 将文件命名为select.module.scss，scss当作一个模块来使用，引入时可重命名xx，然后用xx.选择器名/xx['选择器名']来使用

import styles from "./style/select.module.scss"; /*styles为给模块另起的名字*/
/*选中模块中的中某个方法或其他*/
<div className = {styles.select}>
            TEST
</div>
        /*或者*/
<div className = {styles['select']}>
            TEST
</div>

2 文件仍然是scss文件，非模块化文件引入时若文件中有export，可单独引入输出的这块，若无输出，就整体引入

import "./style/select.scss"
<div className = "select">
            TEST
</div>
import {select} from "./style/select.scss"
<div className = "select">
            TEST
</div>

export default xxx在引用时，可直接imort xxxx from "路径"，xxxx表示导入目标文件时取的名字，但是expot default React.FC函数，导入时不可更换函数名

• 命名导入函数名称必须与导出名称匹配，这也是称它为命名导入的原因

• 默认导入可以输入你想要的任意名称

注意写onClick函数时一定要加上箭头函数，如果不加上()=>就会报错，据说是因为那样表示渲染时直接执行而此处需要一个未执行的函数

onClick={()=>setshowOptions(!showOptions)//正确的
onClick={setshowOptions(!showOptions)//错误的

下线框和上线框使得本应该共用的线框变厚，需要加上 margin-top:-1px;

.options .option{
    padding: 8px 16px;
    border: 1px solid #000;
    width: 100%;
    margin-top:-1px; 
}

cursor:pointer属性是在计算机中将光标呈现为指示链接的指针（一只手）

今天的代码 select.tsx

import { type } from "@testing-library/user-event/dist/type";
import React,{useMemo, useState} from "react"
import "./style/select.scss"
// import {Option} from "./selectOption"
export type Option = {
    label: string;
    value: string | number;
}
interface SelectProps{
    placeholder?: String;
    options?: Option[];
};
const Select:React.FC<SelectProps> = ({placeholder,options}) => {
    var selectedItem : Option|null = null;
    const [showOptions,setshowOptions] = useState(false) //是否打开下拉框
    const onChange = (option: Option | null)=>{
        selectedItem = option;
        setshowOptions(!showOptions);
        console.log(selectedItem)
    }
    return (
        <div>
        <div className = "select" onClick={()=>setshowOptions(!showOptions)}>
            <span>{selectedItem == null ? placeholder: selectedItem}</span>
            <span className="v">v</span>
        </div>
        {
            showOptions && (
            <div className="options">
                {
                    options?.map(option =>(
                        <div key = {option.label} className = "option" onClick={()=>onChange(option)} >
                        <span>{option.value}</span>
                        </div>
                    ))
                }
            </div>
            )
        }
        </div>
    )
};
export default Select;

selecDemo.tsx

import Select,{Option} from "../select";
import React from "react";
const options : Option[] = [
    {
        label:"audi",
        value:"123audi"
    },
    {
        label:"motor",
        value:"456motor"
    },
    {
        label:"bicycle",
        value:"789bicycle"
    },
   
]
export default function App() {
    return (
        <div className="App ">
            <Select placeholder={"请选择一个对象"} options = {options}></Select>
        </div>
    );
}

select.scss

.select{
    font-size: 14px;
    display:flex;
    padding:8px 16px;
    border:1px solid rgb(8, 8, 8);
    width: 200px;;
    cursor: pointer;
    justify-content: space-between;
}
// .select span{
//     font-size: 14px;
// }
.options{
    width: 200px;
}
.options .option{
    font-size: 14px;
    padding: 8px 16px;
    border: 1px solid #000000;
    width: 100%;
    margin-top:-1px;
    cursor: pointer;
}
// .select-container {
//     text-align: left;
//     border: 1px solid #ccc;
//     position: relative;
//     border-radius: 5px;
// }

// .select-input {
//     padding: 5px;
//     display: flex;
//     align-items: center;
//     justify-content: space-between;
//     user-select: none;
// }