ReactJs中为选择器/下拉列表设置默认值并支持手动重新选中默认值

Hey there! The issue here is that your default option --Select One-- isn’t actually part of your categoryOptions list—so users can’t select it manually after choosing another option. Let’s fix that with a couple of simple changes:

Step 1: Add the default option to your options array #

First, you need to include the --Select One-- option directly in the categoryOptions you get from the API. This makes it a selectable option in the dropdown menu.

// Assuming categoryOptions is the array returned from your API
const updatedCategoryOptions = [
  { value: "0", label: "--Select One--" },
  ...categoryOptions // Spread the API-fetched options here
];

Step 2: Update your Select component #

Now use this updated options array in your Select component. You can keep using defaultValue for initial state, but if you want more control (like adding a manual reset button later), switching to a controlled component with value and state is better.

Option A: Keep using defaultValue (minimal change)

<Select
  className="AdvancedFilterText"
  ref={selectRef}
  options={updatedCategoryOptions} // Use the updated array here
  styles={{
    option: base => ({
      ...base,
      borderBottom: '1px solid hsl(0, 0%, 80%,.5)',
      height: '100%',
    }),
  }}
  defaultValue={{ value: "0", label: "--Select One--" }}
  isSearchable
  placeholder="CHOOSE CATEGORY"
  onChange={event => onCategorySelect(event)}
/>

Option B: Switch to controlled component (for easier resets)

This lets you programmatically reset the selection (like adding a "Reset" button later) and gives you full control over the selected value:

import { useState } from 'react';

// Inside your component
const [selectedCategory, setSelectedCategory] = useState({ value: "0", label: "--Select One--" });

const handleCategorySelect = (option) => {
  setSelectedCategory(option);
  onCategorySelect(option); // Call your original onChange handler
};

// Add a reset button if needed
const resetCategory = () => {
  setSelectedCategory({ value: "0", label: "--Select One--" });
};

// Updated Select component
<Select
  className="AdvancedFilterText"
  ref={selectRef}
  options={updatedCategoryOptions}
  styles={{
    option: base => ({
      ...base,
      borderBottom: '1px solid hsl(0, 0%, 80%,.5)',
      height: '100%',
    }),
  }}
  value={selectedCategory}
  isSearchable
  placeholder="CHOOSE CATEGORY"
  onChange={handleCategorySelect}
/>

{/* Optional reset button */}
<button onClick={resetCategory} style={{ marginLeft: '10px' }}>
  Reset Category
</button>

Why this works #

By adding the default option to your options array, it becomes a visible, selectable choice in the dropdown. Users can now switch back to --Select One-- anytime without having to reset all filters. The controlled component approach adds extra flexibility if you want to add one-click reset buttons for individual selectors later.

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