提交表单后如何清空MUI Select组件的值？

问题原因 #

MUI的Select是受控组件，其选中值由React Hooks管理的状态控制，而event.target.reset()仅能重置原生表单元素的默认值，无法同步更新React维护的状态，因此Select的选中值不会被清空。

最佳解决方法 #

在表单提交完成后，手动重置所有对应表单字段的状态变量，这是受控组件场景下最可靠的处理方式：

1. 修改提交处理函数 #

在calculateCaloricIntake函数中，完成计算逻辑后，将所有表单相关的状态重置为初始值：

const calculateCaloricIntake = (event) => {
    event.preventDefault();
    // 执行卡路里计算
    setCalorieIntake(CalculateCalories(sex, age, userWeight, heighFeet, heightInches, activityLevel, calorieIntake));   
    // 手动重置所有表单状态
    setHeightInches(''); // 或你定义的初始值，比如null/undefined
    setActivityLevel('');
    // 若存在其他表单字段（如sex、age等），同步重置
    setSex('');
    setAge('');
    setUserWeight('');
    setHeighFeet('');
}

2. 确保Select组件完全受控 #

给每个Select组件添加value属性，明确绑定对应状态值，避免状态与UI不一致：

<FormControl>
    <InputLabel>Height in Inches</InputLabel>
    <Select
        required
        value={heightInches}
        onChange={(event) => setHeightInches(event.target.value)}
        sx={{width : 150}}
    >
        <MenuItem value={1}>1</MenuItem>
        <MenuItem value={2}>2</MenuItem>
        {/* 其余选项省略 */}
    </Select>
</FormControl>

<FormControl>
    <InputLabel>Activity Level</InputLabel>
    <Select
        required
        value={activityLevel}
        onChange={(event) => setActivityLevel(event.target.value)}
        sx={{width : 150}}
    >
        <MenuItem value={1.2}>Sedentary</MenuItem>
        <MenuItem value={1.375}>Slightly Active</MenuItem>
        {/* 其余选项省略 */}
    </Select>
</FormControl>

不推荐的方案说明 #

• 直接操作DOM：通过DOM节点清空Select值会破坏React单向数据流，导致状态与UI脱节，后续操作易引发异常。
• 改用非受控组件：虽然能通过reset()清空，但会丢失React Hooks管理状态的便利性，不利于表单联动和状态追踪。

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