React Select标签默认值未保存问题：如何默认选中首个选项并获取其值

这个问题很常见，要让select默认选中第一个选项并将其作为初始值，你需要做两个关键调整，同时修正代码里的一些小语法问题：

关键修改步骤 #

• 设置初始state值：把useState的初始值从空字符串改成options[0].value（也就是'regular'），这样组件挂载时type就有了默认值。用数组索引的好处是以后如果修改options数组，不需要手动更新初始值，更灵活。
• 将select设为受控组件：给select标签添加value={type}属性，让选中状态和type state保持同步，确保初始渲染时就会选中对应值的选项。
• 修正语法错误：你的代码里onChange和onClick使用了字符串形式的回调，这是错误的写法，应该用大括号包裹回调函数；另外option的value属性也不需要加引号包裹变量。

修改后的完整代码 #

import { useState } from 'react';

function ProductForm (props) {
  const { onAdd } = props;
  // 初始值设为options第一个元素的value
  const [type, setType] = useState(options[0].value);
  const options = [{ label: 'regular', value: 'regular' }, { label: 'urgent', value: 'urgent' }];
  
  const addProduct = (evt) => {
    onAdd(...); // 保留你原来的添加逻辑
  };

  return (
    <div className='product-form'>
      {/* 其他表单元素 */}
      <div className='type'>
        {/* 添加value={type}绑定状态，修正onChange写法 */}
        <select value={type} onChange={(evt) => setType(evt.target.value)}>
          { options.map((option) => (
            <option key={option.value} value={option.value}>{option.label}</option>
          )) }
        </select>
      </div>
      <div className='add'>
        {/* 修正onClick的写法，去掉引号 */}
        <input type='button' value="Add" onClick={addProduct} />
      </div>
    </div>
  );
}

export default ProductForm;

补充说明 #

这样修改后，组件挂载时type的初始值就是'regular'，select会自动选中第一个选项，而且后续用户切换选项时，type state也会同步更新，完美解决你遇到的初始值为空的问题。

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