详解Select组件

一、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 (
      
        {placeholder}
        {options.map((option) => (
          {option.label}
        ))}
      
    );
  }
}

在上述代码中，我们使用了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 (
    
      {placeholder}
      {options.map((option) => (
        {option.label}
      ))}
    
  );
}

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 (
    
      One
      Two
      Three
    
  );
}

五、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}`);
}


  Jack
  Lucy
  
    Disabled
  
  yiminghe

在上述代码中，我们可以通过defaultValue设置初始值，通过style属性设置组件样式，并且通过Option组件中的disabled属性来设置禁止选择的状态。

七、Select组件封装 vue3

在Vue3版本中，也可以对Select组件进行封装。下面是一个基本的Vue3 Select组件的示例：

  
    {{ placeholder }}
    {{ option.label }}
  



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,
    };
  },
});

在上述代码中，我们使用了Vue3中的defineComponent函数进行组件的定义，使用了reactive函数进行状态管理，将props和state进行了响应式绑定。同时也对props进行了类型校验和设置默认属性值。

八、Select组件的onchange

在原生的HTML元素中，我们可以通过onchange事件获取到被选中的选项的值。在Select组件中，也可以通过onChange事件获取到被选中的选项的值。下面是一个基本的使用示例：

handleChange = (value) => {
  console.log(`selected ${value}`);
}

render() {
  return (
    
      One
      Two
      Three
    
  );
}

在上述代码中，我们在Select组件中传递了一个handleChange函数，在函数中使用console.log打印出所选择的选项的值。

九、Select组件实现多选框

在一些场景下，我们可能需要使用Select组件实现多选框。此时，我们可以使用antd库提供的mode属性来实现多选框效果。

handleChange = (value) => {
  console.log(`selected ${value}`);
}

render() {
  return (
    
      One
      Two
      Three
    
  );
}

在上述代码中，我们在Select组件中传递了一个mode属性，将其设置为multiple，使其成为多选框。

十、Select组件加前置搜索图标选取

在一些场景下，我们需要给Select组件添加一个前置搜索图标，用于在列表中搜索所选择的选项。在antd的Select组件中，我们可以使用suffixIcon属性或者自定义渲染下拉箭头来实现前置搜索图标的添加。

import { SearchOutlined } from '@ant-design/icons';

const suffix = (
  
);


  One
  Two
  Three

在上述代码中，我们使用了ant-design/icons库中的SearchOutlined组件来作为搜索图标，并将其赋值给suffixIcon属性。同时，我们也可以通过自定义渲染下拉箭头来添加前置搜索图标。