一、Select组件封装
在前端开发中，Select组件是一个经常用到的表单组件，它可以将一个列表进行展示，并提供下拉选择框进行选择。但是，每次都重新编写Select组件可能会浪费不必要的时间，于是我们可以将它进行封装，提高开发效率。
下面是一个基本的Select组件封装的示例：
import React from 'react';
import PropTypes from 'prop-types';
class MySelect extends React.Component {
static propTypes = {
options: PropTypes.arrayOf(PropTypes.shape({
value: PropTypes.string,
label: PropTypes.string,
})).isRequired,
onChange: PropTypes.func.isRequired,
placeholder: PropTypes.string,
value: PropTypes.string,
}
static defaultProps = {
placeholder: '请选择',
value: '',
}
handleChange = (event) => {
this.props.onChange(event.target.value);
}
render() {
const { options, placeholder, value } = this.props;
return (
);
}
}
在上述代码中，我们使用了React的class形式进行封装，并且使用了PropTypes进行类型校验。同时，我们将options、onChange、placeholder、value四个常用属性进行了封装，使得我们在使用的时候可以方便快捷地进行调用。
二、HookSelect组件
在React16.8版本之后，新增加了Hooks函数，我们可以使用Hooks函数进行数据和生命周期的管理。我们可以重新编写Select组件，使用Hooks函数进行封装。
下面是一个基本的HookSelect组件封装的示例：
import React, { useState } from 'react';
import PropTypes from 'prop-types';
function HookSelect(props) {
const [value, setValue] = useState(props.value);
function handleChange(event) {
const newValue = event.target.value;
setValue(newValue);
props.onChange(newValue);
}
const { options, placeholder } = props;
return (
);
}
HookSelect.propTypes = {
options: PropTypes.arrayOf(PropTypes.shape({
value: PropTypes.string,
label: PropTypes.string,
})).isRequired,
onChange: PropTypes.func.isRequired,
placeholder: PropTypes.string,
value: PropTypes.string,
};
HookSelect.defaultProps = {
placeholder: '请选择',
value: '',
};
在上述代码中，我们使用了useState Hook函数进行状态管理，将value和setValue作为状态进行管理。同时我们也对props进行了类型校验和设置默认属性值。
三、Select组件距离顶部
在有些场景下，我们需要将Select组件固定在页面顶部，实现类似于select2的效果。但是，在antd的Select组件中，并没有提供类似于select2中fixed的属性。所以我们可以使用CSS的position属性和z-index属性来实现。
.select-wrapper {
position: relative;
z-index: 999;
}
.ant-select-dropdown {
position: absolute;
top: 100%;
left: 0;
z-index: 998;
}
以上就是一个基本的Select组件固定在顶部的样式设置示例。
四、Select组件怎么获取value
通过onChange事件获取到的值可以通过event.target.value获取，也可以通过state获取。
示例代码如下：
handleChange = (value) => { // value为antd select组件的onChange回调参数
this.setState({ value });
}
render() {
const { value } = this.state;
return (
);
}
五、Select组件的光标问题
在使用Select组件的时候，可能会遇到光标不可见或者错位的问题。此时我们可以通过添加autoComplete="off"属性来解决这个问题。它会把浏览器默认的自动填充操作关闭掉，避免了Select组件的光标问题。
六、Antd Select组件
在React UI库Antd中，也提供了Select组件。下面是一个基本的Antd Select组件的示例：
import { Select } from 'antd';
const { Option } = Select;
function handleChange(value) {
console.log(`selected ${value}`);
}
在上述代码中，我们可以通过defaultValue设置初始值，通过style属性设置组件样式，并且通过Option组件中的disabled属性来设置禁止选择的状态。
七、Select组件封装 vue3
在Vue3版本中，也可以对Select组件进行封装。下面是一个基本的Vue3 Select组件的示例：
<script>
import { defineComponent, reactive } from 'vue';
export default defineComponent({
props: {
options: {
type: Array,
required: true,
default: () => [],
},
onChange: {
type: Function,
required: true,
},
placeholder: {
type: String,
default: '请选择',
},
value: {
type: String,
default: '',
},
},
setup(props) {
const state = reactive(props);
const handleChange = (event) => {
const newValue = event.target.value;
state.value = newValue;
props.onChange(newValue);
};
return {
handleChange,
};
},
});
</script>
在上述代码中，我们使用了Vue3中的defineComponent函数进行组件的定义，使用了reactive函数进行状态管理，将props和state进行了响应式绑定。同时也对props进行了类型校验和设置默认属性值。
八、Select组件的onchange
在原生的HTML元素中，我们可以通过onchange事件获取到被选中的选项的值。在Select组件中，也可以通过onChange事件获取到被选中的选项的值。下面是一个基本的使用示例：
handleChange = (value) => {
console.log(`selected ${value}`);
}
render() {
return (
);
}
在上述代码中，我们在Select组件中传递了一个handleChange函数，在函数中使用console.log打印出所选择的选项的值。
九、Select组件实现多选框
在一些场景下，我们可能需要使用Select组件实现多选框。此时，我们可以使用antd库提供的mode属性来实现多选框效果。
handleChange = (value) => {
console.log(`selected ${value}`);
}
render() {
return (
);
}
在上述代码中，我们在Select组件中传递了一个mode属性，将其设置为multiple，使其成为多选框。
十、Select组件加前置搜索图标选取
在一些场景下，我们需要给Select组件添加一个前置搜索图标，用于在列表中搜索所选择的选项。在antd的Select组件中，我们可以使用suffixIcon属性或者自定义渲染下拉箭头来实现前置搜索图标的添加。
import { SearchOutlined } from '@ant-design/icons';
const suffix = (
在上述代码中，我们使用了ant-design/icons库中的SearchOutlined组件来作为搜索图标，并将其赋值给suffixIcon属性。同时，我们也可以通过自定义渲染下拉箭头来添加前置搜索图标。
