詳解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屬性。同時，我們也可以通過自定義渲染下拉箭頭來添加前置搜索圖標。