当前位置：首页 > React

react 实现select

2026-01-26 13:50:10React

React 实现 Select 组件

使用 React 实现一个 Select 下拉选择组件可以通过多种方式完成，以下是几种常见方法：

原生 HTML select 封装

最简单的实现是直接封装原生 <select> 元素：

function NativeSelect({ options, value, onChange }) {
  return (
    <select value={value} onChange={e => onChange(e.target.value)}>
      {options.map(option => (
        <option key={option.value} value={option.value}>
          {option.label}
        </option>
      ))}
    </select>
  );
}

// 使用示例
const options = [
  { value: 'apple', label: 'Apple' },
  { value: 'banana', label: 'Banana' },
  { value: 'orange', label: 'Orange' }
];

function App() {
  const [selectedValue, setSelectedValue] = useState('');
  return (
    <NativeSelect 
      options={options} 
      value={selectedValue} 
      onChange={setSelectedValue} 
    />
  );
}

自定义 Select 组件

创建一个更灵活的自定义 Select 组件：

function CustomSelect({ options, value, onChange }) {
  const [isOpen, setIsOpen] = useState(false);

  const selectedOption = options.find(opt => opt.value === value);

  return (
    <div className="custom-select">
      <div 
        className="select-header" 
        onClick={() => setIsOpen(!isOpen)}
      >
        {selectedOption?.label || 'Select...'}
      </div>

      {isOpen && (
        <div className="select-options">
          {options.map(option => (
            <div
              key={option.value}
              className={`option ${value === option.value ? 'selected' : ''}`}
              onClick={() => {
                onChange(option.value);
                setIsOpen(false);
              }}
            >
              {option.label}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

使用第三方库

对于更复杂的需求，可以使用成熟的第三方库：

react-select (最流行的选择):
```
npm install react-select
```

import Select from 'react-select';

function App() {
  const options = [
    { value: 'apple', label: 'Apple' },
    { value: 'banana', label: 'Banana' },
    { value: 'orange', label: 'Orange' }
  ];

  const [selectedOption, setSelectedOption] = useState(null);

  return (
    <Select
      value={selectedOption}
      onChange={setSelectedOption}
      options={options}
    />
  );
}

Material-UI Select (适合 Material Design 风格):

npm install @mui/material @emotion/react @emotion/styled

import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';

function MaterialSelect() {
  const [age, setAge] = useState('');

  return (
    <FormControl fullWidth>
      <Select
        value={age}
        onChange={e => setAge(e.target.value)}
      >
        <MenuItem value={10}>Ten</MenuItem>
        <MenuItem value={20}>Twenty</MenuItem>
        <MenuItem value={30}>Thirty</MenuItem>
      </Select>
    </FormControl>
  );
}

样式自定义

为自定义 Select 添加基本 CSS:

react 实现select

.custom-select {
  position: relative;
  width: 200px;
}

.select-header {
  padding: 8px 12px;
  border: 1px solid #ccc;
  cursor: pointer;
}

.select-options {
  position: absolute;
  width: 100%;
  border: 1px solid #ccc;
  background: white;
  z-index: 100;
}

.option {
  padding: 8px 12px;
  cursor: pointer;
}

.option:hover {
  background: #f0f0f0;
}

.option.selected {
  background: #e0e0e0;
}

这些方法提供了从简单到复杂的 Select 实现方案，可以根据项目需求选择合适的实现方式。