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 是一个对象，但实际上不是
    setOption(e.target.value);
  };

  console.log("Selected Width:", option.width);
  console.log("Selected Height:", option.height);

  return (
    <div className="App">
      <h1>Test!</h1>
      <select onChange={selectHandler}>
        {options.map((opt) => (
          // 这里的 value 属性没有显式设置，或者如果设置为 opt.value，会变成 "[object Object]"
          <option key={opt.label}>{opt.label}</option>
        ))}
      </select>
    </div>
  );
}

export default App;

import React, { useState } from 'react';

// 定义一个默认选项，用于初始状态和占位符
const defaultSelection = { label: '请选择', value: { width: 0, height: 0 } };

function ReactSelectWithObjectValues() {
  // 状态用于存储选中的完整对象
  const [selectedObject, setSelectedObject] = useState(defaultSelection.value);
  // 状态用于控制 <select> 组件的选中值（必须是字符串）
  const [selectedLabel, setSelectedLabel] = useState(defaultSelection.label);

  // 包含复杂对象值的选项数据
  const optionsData = [
    { 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 chosenLabel = event.target.value; // 获取选中的 <option> 的 value 属性（字符串）
    setSelectedLabel(chosenLabel); // 更新用于控制 <select> 的 label

    // 根据 chosenLabel 从 optionsData 中查找对应的完整对象
    const foundOption = optionsData.find(opt => opt.label === chosenLabel);

    if (foundOption) {
      setSelectedObject(foundOption.value); // 更新状态为查找到的复杂对象
    } else {
      // 如果选择了默认占位符，重置为默认值
      setSelectedObject(defaultSelection.value);
    }
  };

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

  return (
    <div className="container">
      <h2>React Select 绑定复杂对象值</h2>
      <p>选择一个选项，获取其对应的宽度和高度属性。</p>

      <select onChange={handleSelectChange} value={selectedLabel}>
        {/* 占位符选项，其 value 也是一个字符串 */}
        <option value={defaultSelection.label}>{defaultSelection.label}</option>
        {/* 动态渲染选项，每个 option 的 value 属性是其 label 字符串 */}
        {optionsData.map((opt) => (
          <option key={opt.label} value={opt.label}>
            {opt.label}
          </option>
        ))}
      </select>

      <div className="display-area">
        <p><strong>选中的对象属性:</strong></p>
        <p>宽度: {selectedObject.width}</p>
        <p>高度: {selectedObject.height}</p>
      </div>
    </div>
  );
}

export default ReactSelectWithObjectValues;

import React, { useState } from 'react';

function ReactSelectWithDataAttributes() {
  const [selectedObject, setSelectedObject] = useState({ width: 0, height: 0 });
  const [selectedLabel, setSelectedLabel] = useState('请选择'); // 用于控制 <select>

  const