我用基本的html css做了这个下拉菜单。它工作得很好。虽然我把它做得很通用，但你可以得到这个想法。

import React from "react";
import "./DropDownInput.css";

const DropDownInput = ({
  name,
  options,
  placeholder,
  onChange,
  selectClassName,
  divClassName,
  selectedValue,
  showPlaceholder = true,
  optionDisabledArr = [],
  required = false,
}) => {
  return (
    <div className={`dropdown ${divClassName}`}>
      <span
        className={`dropdown__arrow ${selectedValue && "dropdown__arrow--up"}`}
      />
      <select
        name={name}
        onChange={(e) => onChange(e.target.value)}
        className={selectClassName}
        selectedValue
        required={required}
      >
        {showPlaceholder && (
          <option disabled selected={!selectedValue ? true : false} value="">
            {placeholder}
          </option>
        )}
        {options.map((option) => (
          <option
            key={option.id || option.value}
            value={option.id || option.value}
            selected={selectedValue === (option.id || option.value)}
            disabled={
              optionDisabledArr.length > 0
                ? optionDisabledArr.indexOf(option.id) === -1
                  ? false
                  : true
                : ""
            }
          >
            {option.status || option.value || option.name}
          </option>
        ))}
      </select>
    </div>
  );
};

export default DropDownInput;

请看下面的截图。我希望它会工作尝试检查option标签中的selected部分
第一次

您的实现在React中有一个问题。在React中，检查当前值的调用是同步的，而状态更新是异步的。

import * as React from 'react';
import './style.css';

export default function App() {
  const [selectedLevel, setSelectedLevel] = React.useState('');
  const onSelect = (event) => {
    console.log(event.target.value);
    setSelectedLevel(event.target.value); // doesn't change the current value
  };

  return (
    <div>
      <h1>{selectedLevel}</h1>
      <select onChange={onSelect}>
        <option value="L1">Level 1 \</option>
        <option value="L2">Level 2\</option>
        <option value="L3">Level 3\</option>
      </select>
    </div>
  );
}

尝试运行上面的代码。
进一步说明

function whatIsTheLevel(){
       console.log(selectedLevel); // gives noting in the first selec    
}

这是一个假设的函数，通过以同步方式运行它，将阻止正确的状态。