React Select 选项绑定复杂对象值的最佳实践

import React, { useState } from "react";

function App() {
  const [option, setOption] = 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' (字符串)，
    // 而不是 { width: 10, height: 10 } 这样的对象
    setOption(e.target.value);
  };

  console.log("当前选中的宽度:", option.width); // 将会是 undefined
  console.log("当前选中的高度:", option.height); // 将会是 undefined

  return (
    <div className="App">
      <h1>React Select 复杂对象值绑定示例</h1>
      <select value={option.label} onChange={selectHandler}>
        {options.map((opt) => (
          // <option> 标签没有显式设置 value 属性，因此其值为其文本内容 (opt.label)
          <option key={opt.label}>{opt.label}</option>
        ))}
      </select>
      <p>选中的宽度: {option.width}</p>
      <p>选中的高度: {option.height}</p>
    </div>
  );
}

export default App;

import React, { useState } from 'react';

function App() {
  // 状态用于存储当前选中的完整选项对象
  // 初始值应与某个默认选项匹配，或提供一个空/默认结构
  const [selectedOption, setSelectedOption] = useState({
    label: '请选择', // 初始显示文本
    value: { width: 0, height: 0 }
  });

  // 选项数据源，每个选项包含一个 label 和一个复杂的 value 对象
  const options = [
    { label: 'first', value: { width: 10, height: 10 } },
    { label: 'second', value: { width: 20, height: 20 } },
    { label: 'third', value: { width: 30, height: 30 } },
  ];

  // 处理选择变化的函数
  const handleSelectChange = (event) => {
    const selectedLabel = event.target.value; // 获取到的是 <option> 的 value 属性值，即 'first', 'second' 等

    // 根据 selectedLabel 在 options 数组中查找对应的完整对象
    const foundOption = options.find(option => option.label === selectedLabel);

    if (foundOption) {
      setSelectedOption(foundOption); // 将找到的完整对象更新到状态
    }
  };

  // 打印当前选中对象的 width 和 height 属性
  console.log("当前选中的宽度:", selectedOption.value.width);
  console.log("当前选中的高度:", selectedOption.value.height);

  return (
    <div className="App">
      <h1>React Select 复杂对象值处理</h1>
      {/* 
        <select> 的 value 属性应该绑定到当前选中 <option> 的 value 属性值。
        这里我们用 selectedOption.label 来控制 <select> 的选中项。
      */}
      <select value={selectedOption.label} onChange={handleSelectChange}>
        {/* 
          添加一个默认的禁用选项，作为占位符。
          其 value 属性通常为空字符串或一个特殊值。
        */}
        <option value="请选择" disabled>请选择一个选项</option>

        {/* 
          遍历 options 数组，为每个选项渲染一个 <option> 标签。
          关键在于为 <option> 显式设置 value 属性为 opt.label。
        */}
        {options.map((opt) => (
          <option key={opt.label} value={opt.label}>
            {opt.label}
          </option>
        ))}
      </select>
      <p>当前选中的宽度: {selectedOption.value.width}</p>
      <p>当前选中的高度: {selectedOption.value.height}</p>
    </div>
  );
}

export default App;