react hook 封装 select
要封装一个 React Hook 的 select 组件，可以按照以下步骤进行：
1. 创建一个新的文件，命名为 `useSelect.js`。
2. 在该文件中引入 React 和 useState 这个 Hook。
3. 创建一个名为 `useSelect` 的函数，并导出。
4. 在 `useSelect` 函数中，使用 `useState` 来创建一个名为 `selectedValue` 的状态变量，并设置初始值为传入的默认值（如果有的话）。
5. 创建一个名为 `handleSelectChange` 的函数，用来处理 select 元素的变化事件。该函数应该接受一个参数，即 select 元素的当前值，并将该值更新到 `selectedValue` 状态变量中。
6. 返回一个包含 `selectedValue` 和 `handleSelectChange` 的对象，以便在组件中使用。
下面是具体的代码示例：
jsx
import React, { useState } from 'react';
function useSelect(defaultValue) {
  const [selectedValue, setSelectedValue] = useState(defaultValue);
  function handleSelectChange(value) {
    setSelectedValue(value);
  }
  return { selectedValue, handleSelectChange };
}
export default useSelect;
然后，你可以在你的组件中使用这个自定义的 select Hook：
jsx
import React from 'react';
import useSelect from './useSelect';
function MyComponent() {
  const options = ['option1', 'option2', 'option3'];
  const { selectedValue, handleSelectChange } = useSelect(options[0]);
  return (
    <select value={selectedValue} onChange={e => handleSelectChange(e.target.value)}>
      {options.map(option => (
        <option key={option} value={option}>{option}</option>
      ))}
    </select>
  );
}
export default MyComponent;
通过这种方式，你可以在多个组件中重复使用这个自定义的 select Hook，并且可以方便地管理 select 元素的状态。
react面试题hook是什么