在 React select 元素中管理包含对象值的选项

import * as React from "react";

function App() {
  const [option, setOption] = React.useState({ width: 0, height: 0 });

  const options = [
    { label: "first", value: { width: 10, height: 10 } },
    { label: "second", value: { width: 20, height: 20 } },
    { label: "third", value: { width: 30, height: 30 } },
  ];

  const selectHandler = (e) => {
    // 此时 e.target.value 将是 "first", "second" 或 "third" 等字符串
    setOption(e.target.value);
  };

  console.log(option.width); // 输出 undefined
  console.log(option.height); // 输出 undefined

  return (
    <div className="App">
      <h1>Test!</h1>
      {/* 这里的 value={options.value} 是不正确的，options 是数组 */}
      <select value={options.value} onChange={selectHandler}>
        {options.map((option) => (
          // <option> 元素没有设置 value 属性，因此 e.target.value 会是其文本内容 (label)
          <option key={option.label}>{option.label}</option>
        ))}
      </select>
    </div>
  );
}

export default App;

import * as React from 'react';

function App() {
  const options = [
    { label: 'first', value: { width: 10, height: 10 } },
    { label: 'second', value: { width: 20, height: 20 } },
    { label: 'third', value: { width: 30, height: 30 } },
  ];

  // 用于存储当前选中选项的完整对象值
  const [selectedObject, setSelectedObject] = React.useState({ width: 0, height: 0 });
  // 用于控制 <select> 组件的当前选中值（字符串，通常是 label 或 id）
  const [selectedLabel, setSelectedLabel] = React.useState(''); 

  // 组件挂载时，设置默认选中第一个选项
  React.useEffect(() => {
    if (options.length > 0) {
      setSelectedObject(options[0].value);
      setSelectedLabel(options[0].label);
    }
  }, []); // 空依赖数组确保只在组件首次渲染后执行一次

  const selectHandler = (e) => {
    const selectedLabelFromEvent = e.target.value; // 获取到的是选项的 value 属性值（字符串）

    // 根据获取到的标签字符串，在 options 数组中查找对应的完整对象
    const foundOption = options.find(opt => opt.label === selectedLabelFromEvent);

    if (foundOption) {
      setSelectedObject(foundOption.value); // 更新存储完整对象的 state
      setSelectedLabel(foundOption.label);   // 更新用于控制 <select> 的字符串 state
    }
  };

  console.log("当前选中对象的宽度:", selectedObject.width);
  console.log("当前选中对象的高度:", selectedObject.height);

  return (
    <div className="App">
      <h1>在 React Select 中使用对象值</h1>
      {/* 
        <select> 的 value 属性应绑定到当前选中选项的字符串值 (selectedLabel)。
        这使得 <select> 成为一个受控组件。
      */}
      <select value={selectedLabel} onChange={selectHandler}>
        {options.map((option) => (
          // <option> 元素现在显式设置了 value 属性，其值为 option.label。
          // 这样，e.target.value 就会返回这个 label 字符串。
          <option key={option.label} value={option.label}>
            {option.label}
          </option>
        ))}
      </select>
      <p>当前选中：宽度={selectedObject.width}, 高度={selectedObject.height}</p>
    </div>
  );
}

export default App;