React Bootstrap5表单Select默认值重置问题求助（非react-bootstrap）

问题描述 #

基于React（原生Bootstrap）和Laravel开发的任务调度应用，添加任务后，priority选择框会保留上一次选择的值，但description输入框能正常清空。需要让priority选择框实现同样的清空效果，且不使用react-bootstrap、redux或第三方表单库。

问题根源 #

查看Modelem.js中的选择框代码：

• 选择框未绑定value属性，无法与newdata.priority状态同步
• 默认选项的value绑定了newdata.priority，导致状态清空后，默认选项的value也跟着变化，无法正确选中默认项

修复步骤 #

修改Modelem.js中的select组件：

1. 给select标签添加value={newdata.priority}，让选择框与状态双向绑定
2. 将默认选项的value固定为""，而不是绑定newdata.priority

修改后的代码（Modelem.js中select部分） #

<select
    id="priority"
    className={props.myinputclasses(
        "priority",
        "form-select"
    )}
    value={newdata.priority} // 新增：绑定value到状态
    onChange={function (e) {
        return setnewdata({
            ...newdata,
            priority: e.target.value,
        });
    }}
>
    <option value=""> - choose - </option> {/* 修改：固定value为空字符串 */}
    <option value={1}>Important</option>
    <option value={2}>Avarage</option>
    <option value={3}>Non-Important</option>
</select>

原理说明 #

当提交任务后，App.js中的setNewdata(inputs)会将newdata.priority重置为空字符串。此时，选择框因为绑定了value={newdata.priority}，会自动选中value=""的默认选项，实现清空效果，和description输入框的行为保持一致。

内容的提问来源于stack exchange，提问作者Milán Nikolics