如何在React中将select组件的默认选中值设为字符串？

直接说结论：不可行。

React的select组件的value属性值必须和某个<option>的value属性（如果没定义value则匹配option的文本内容）完全一致，才能选中对应的选项。你当前的代码里，select的value设为了"select an option"，但没有任何一个<option>的内容或value和这个字符串匹配，所以不仅不会选中任何选项，还会触发React的警告。

正确的做法是添加一个对应的默认选项，同时配合受控或非受控的方式来处理：

方案1：受控组件（推荐） #

用state管理选中值，初始值设为默认字符串，同时添加对应的禁用选项：

const Component = () => {
  const [selectedValue, setSelectedValue] = React.useState("select an option");

  return (
    <select 
      value={selectedValue} 
      onChange={(e) => setSelectedValue(e.target.value)}
    >
      <option value="select an option" disabled>请选择选项</option>
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
    </select>
  );
};

方案2：非受控组件 #

用defaultValue属性设置初始选中值，同样需要对应的选项：

const Component = () => {
  return (
    <select defaultValue="select an option">
      <option value="select an option" disabled>请选择选项</option>
      <option>Option 1</option>
      <option>Option 2</option>
    </select>
  );
};

给默认选项加上disabled属性，可以防止用户重新选中这个提示项，提升交互体验。

内容的提问来源于stack exchange，提问作者user20984971