javascript - 当选项是对象时选择选项的最佳方式是什么？

Question

当选项是对象时选择选项的最佳方式是什么？

在更改所选值期间，我需要获取所选选项对象

示例https://codesandbox.io/s/st-of-select-object-ssib9

function App() {
  const [value, setValue] = useState(options[0]);

  return (
    <select
      value={value}
      onChange={event => {
        setValue(event.target.value);
      }}
    >
      {options.map(option => {
        return <option value={option}>{option.label}</option>;
      })}
    </select>
  );
}

Answer 1

我认为您希望状态成为一个对象，而不是选择的值，如果是这样，请尝试以下操作:

const [option, setOption] = useState(options[0]);

function handleChange(event) {
    const { value } = event.target;
    const option = options.find(o => o.value === parseInt(value, 10));
    if(option)
      setOption(option); // object
}

...

<select
  value={option.value}
  onChange={handleChange}
>
      {options.map(option => <option key={option.value} value={option.value}>{option.label}</option>)}
</select>

演示: