React Select组件添加禁用默认选项后自动选中问题的解决

问题根源在于初始状态与默认选项的value设置不匹配：你给默认禁用选项未指定value，且useState初始值为undefined，这会让select自动跳过禁用选项，选中第一个可用选项。按以下方式调整即可实现需求：

• 给禁用的默认选项添加value=""属性，赋予它明确的标识值
• 将useState的初始值设为""，与默认选项的value对应，确保初始渲染时选中这个禁用选项

调整后的完整代码：

function Select() {
    // 初始值设为空字符串，对应默认选项的value
    const [option, setOption] = useState("");

    function handleOnChange(event) {
        setOption(event.target.value);
    }

    return (
        <select value={option} onChange={handleOnChange}>
            {/* 给禁用选项添加value="" */}
            <option disabled value="">Select your option</option>
            {OPTIONS.map(value => (
                <option key={value} value={value}>{value}</option>
            ))}
        </select>
    );
}

调整后，初始状态会显示"Select your option"这个禁用选项，用户选择其他选项后，由于该默认选项处于disabled状态，无法再次被选中，完全符合预期效果。

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