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) => {
    // 预期获取到 { width: N, height: M } 对象，但实际上 e.target.value 会是 'first', 'second', 'third'
    setOption(e.target.value);
  };

  console.log("当前选择的宽度:", option.width);
  console.log("当前选择的高度:", option.height);

  return (
    <div className="App">
      <h1>React Select 复杂对象值示例</h1>
      <select value={options.value} onChange={selectHandler}>
        {options.map((option) => (
          // 这里 <option> 标签没有显式设置 value 属性
          <option key={option.label}>{option.label}</option>
        ))}
      </select>
      <p>选择结果: 宽度 {option.width}, 高度 {option.height}</p>
    </div>
  );
}

export default App;

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) => {
    const selectedLabel = e.target.value; // 获取到的是 'first', 'second', 'third' 等字符串
    switch (selectedLabel) {
      case 'first':
        setOption(options[0].value);
        break;
      case 'second':
        setOption(options[1].value);
        break;
      case 'third':
        setOption(options[2].value);
        break;
      default:
        // 处理未匹配的情况，例如设置默认值或错误
        setOption({ width: 0, height: 0 });
        break;
    }
  };

  console.log("当前选择的宽度:", option.width);
  console.log("当前选择的高度:", option.height);

  return (
    <div className="App">
      <h1>React Select 复杂对象值示例</h1>
      {/* 注意：<select> 的 value 属性应绑定到当前选中项的 value，
          但此处为了简化，且因为选项的 value 是对象，暂时不直接绑定 */}
      <select onChange={selectHandler}>
        {options.map((optionItem) => (
          // 确保 <option> 的 value 属性被设置为可用于查找的唯一标识（这里是 label）
          <option key={optionItem.label} value={optionItem.label}>
            {optionItem.label}
          </option>
        ))}
      </select>
      <p>选择结果: 宽度 {option.width}, 高度 {option.height}</p>
    </div>
  );
}

export default App;

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) => {
    const selectedLabel = e.target.value;
    // 使用 find 方法在 options 数组中查找匹配的选项对象
    const selectedOption = options.find(opt => opt.label === selectedLabel);

    if (selectedOption) {
      setOption(selectedOption.value); // 将找到的复杂对象值设置到状态
    } else {
      // 处理未找到匹配项的情况，例如设置默认值
      setOption({ width: 0, height: 0 });
    }
  };

  console.log("当前选择的宽度:", option.width);
  console.log("当前选择的高度:", option.height);

  return (
    <div className="App">
      <h1>React Select 复杂对象值示例 (优化版)</h1>
      {/* <select> 的 value 属性可以绑定到当前选中项的 label，
          以确保组件受控，但此处为了简化演示，暂时省略 */}
      <select onChange={selectHandler}>
        {options.map((optionItem) => (
          <option key={optionItem.label} value={optionItem.label}>
            {optionItem.label}
          </option>
        ))}
      </select>
      <p>选择结果: 宽度 {option.width}, 高度 {option.height}</p>
    </div>
  );
}

export default App;