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' 等字符串
    // 而不是 { width: 10, height: 10 } 这样的对象
    setOption(e.target.value); // 这里会把字符串赋给 option 状态
  };

  console.log(option.width); // 预期会是 undefined，因为 option 现在是字符串
  console.log(option.height); // 预期会是 undefined

  return (
    <div className="App">
      <h1>Test!</h1>
      {/* <select> 的 value 属性也存在问题，它期望一个与 <option> value 匹配的字符串 */}
      <select value={options.value} onChange={selectHandler}>
        {options.map((opt) => ( // 注意这里将 option 改名为 opt 以避免变量名冲突
          // 这里的 <option> 没有 value 属性，因此 e.target.value 将是 opt.label
          <option key={opt.label}>{opt.label}</option>
        ))}
      </select>
      <p>Selected Width: {option.width}</p>
      <p>Selected Height: {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) => {
    console.log("Selected label:", e.target.value); // 此时 e.target.value 是 'first', 'second', 'third'
    switch (e.target.value) {
      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 }); // 处理未匹配的情况
    }
  };

  console.log("Current option width:", option.width);
  console.log