30秒React项目：非受控Select组件实现详解

30秒React项目：非受控Select组件实现详解

30-seconds-of-react Short React code snippets for all your development needs 项目地址: https://gitcode.com/gh_mirrors/30/30-seconds-of-react

什么是非受控Select组件

在React中，表单元素可以分为受控组件和非受控组件。非受控组件是指表单数据由DOM本身处理，而不是由React组件状态控制的表单元素。本文介绍的Select组件就是一个典型的非受控实现。

组件实现解析

这个Select组件的实现非常简洁但功能完整，主要包含以下几个关键点：

1. 初始值设置：通过selectedValue属性作为<select>元素的defaultValue，这确保了组件初次渲染时显示正确的选项。

2. 选项渲染：使用values属性接收一个二维数组，每个子数组包含两个元素：选项值和显示文本。通过map方法遍历生成<option>元素。

3. 值变更处理：当用户选择不同选项时，通过onChange事件触发onValueChange回调，将新值传递给父组件。

代码实现

const Select = ({ values, onValueChange, selectedValue, ...rest }) => {
  return (
    <select
      defaultValue={selectedValue}
      onChange={({ target: { value } }) => onValueChange(value)}
      {...rest}
    >
      {values.map(([value, text]) => (
        <option key={value} value={value}>
          {text}
        </option>
      ))}
    </select>
  );
};

使用示例

const choices = [
  ['grapefruit', 'Grapefruit'],
  ['lime', 'Lime'],
  ['coconut', 'Coconut'],
  ['mango', 'Mango'],
];

ReactDOM.createRoot(document.getElementById('root')).render(
  <Select
    values={choices}
    selectedValue="lime"
    onValueChange={val => console.log(val)}
  />
);

关键点说明

1. props结构：

   • values: 选项数据，格式为[[value1, text1], [value2, text2], ...]
   • onValueChange: 值变更回调函数
   • selectedValue: 初始选中的值
   • ...rest: 接收并传递其他所有属性到<select>元素

2. 性能优化：

   • 为每个<option>设置了唯一的key属性，这是React列表渲染的最佳实践
   • 使用解构赋值直接从事件对象中获取value，代码更简洁

3. 灵活性：

   • 通过...rest可以传递任何标准的<select>属性，如disabled、className等
   • 数据格式简单明了，易于与其他数据源集成

与受控组件的区别

与受控Select组件相比，这个实现有以下特点：

1. 不使用value属性而使用defaultValue，表示初始值后不再控制
2. 父组件不需要维护Select的状态，只需监听变化
3. 更接近原生HTML表单元素的行为

适用场景

这种非受控Select组件非常适合以下情况：

1. 表单数据不需要实时验证或处理
2. 只需要在提交时获取最终值
3. 与其他非React代码或库集成
4. 性能要求较高的大型表单

总结

这个30秒React项目中的Select组件实现展示了如何创建一个简单但功能完整的非受控下拉选择组件。它遵循了React的最佳实践，同时保持了足够的灵活性以适应各种使用场景。理解这种实现方式有助于开发者根据具体需求选择受控或非受控的表单组件方案。

30-seconds-of-react Short React code snippets for all your development needs 项目地址: https://gitcode.com/gh_mirrors/30/30-seconds-of-react