未受控的选择元素

渲染一个未受控的 <select> 元素，使用回调函数将其值传递给父组件。

• 使用 selectedValue 属性作为 <select> 元素的 defaultValue，设置其初始值。
• 使用 onChange 事件触发 onValueChange 回调函数，并将新值发送给父组件。
• 使用 Array.prototype.map() 在 values 数组上创建一个 <option> 元素，为每个传递的值创建一个选项。
• values 中的每个项必须是一个包含两个元素的数组，第一个元素是项的 value，第二个元素是显示的文本。

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', '葡萄柚'],
  ['lime', '酸橙'],
  ['coconut', '椰子'],
  ['mango', '芒果'],
];
ReactDOM.createRoot(document.getElementById('root')).render(
  <Select
    values={choices}
    selectedValue="lime"
    onValueChange={val => console.log(val)}
  />
);