React下拉框点击清除筛选后未恢复默认值问题

你的问题出在Company组件没有使用父组件传入的value来控制select的选中状态。Sidebar里虽然在点击清除按钮时把companyValue设为空字符串，但Company组件既没接收这个value属性，也没将其绑定到select元素上，导致下拉框选中状态和父组件状态不同步。

修复步骤 #

1. 修改Company组件，接收并绑定value属性

更新Company.js，新增value参数并将select的value与该属性绑定：

import React from "react";
import "./Company.css";

// 新增value参数
function Company({ handleChange, value }) {
  const handleCompanyChange = (event) => {
    handleChange(event);
  };

  return (
    <div>
      <h2 className="sidebar-title">Company</h2>
      <div>
        {/* 给select添加value属性，绑定到props.value */}
        <select 
          onChange={handleCompanyChange} 
          className="company-dropdown" 
          name="company"
          value={value}
        >
          <option value="">All</option>
          <option value="Honda">Honda</option>
          <option value="Toyota">Toyota</option>
        </select>
      </div>
    </div>
  );
}

export default Company;

2. 确认父组件传值逻辑

你在Sidebar中已经正确将companyValue传递给Company组件，这部分无需修改：

<Company handleChange={handleCompanyChange} value={companyValue} />

现在点击「Clear All Filters」按钮时，setCompanyValue("")会将空值同步到Company组件的value属性，select会自动选中value为空的「All」选项，实现下拉框状态与筛选逻辑的同步重置。

如果Model和Category组件也存在类似的状态不同步问题，可参照同样的逻辑：在Sidebar中维护对应状态，传递给子组件并绑定到select的value上，清除筛选时重置对应状态即可。

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