React实现：基于MajorHead下拉框选择联动填充两个下拉框

Got it, let's build this dependent dropdown feature in React. I'll show you a straightforward, maintainable approach that handles the exact联动 rules you laid out.

Step 1: Define Your联动 Data Structure #

First, let's map each MajorHead option to its corresponding Method and Minorhead options. This keeps all your联动 logic in one place, making it easy to update later:

const majorHeadData = {
  cheating: {
    methodOptions: ['apple', 'orange'],
    minorHeadOptions: ['a&b']
  },
  abduction: {
    methodOptions: ['cat', 'dog'],
    minorHeadOptions: ['AB&BC']
  }
  // Add more MajorHead entries here as needed
};

Step 2: Set Up State Management #

We'll use React's useState hook to track the selected values for each dropdown:

import { useState } from 'react';

function DependentDropdowns() {
  const [selectedMajor, setSelectedMajor] = useState('');
  const [selectedMethod, setSelectedMethod] = useState('');
  const [selectedMinor, setSelectedMinor] = useState('');

Step 3: Render the Dropdowns #

Now we'll render each dropdown, linking their options and selection states based on the MajorHead choice:

return (
    <div style={{ padding: '2rem' }}>
      {/* MajorHead Dropdown */}
      <div style={{ marginBottom: '1rem' }}>
        <label>Major Head:</label>
        <select
          value={selectedMajor}
          onChange={(e) => {
            const newMajor = e.target.value;
            setSelectedMajor(newMajor);
            // Reset Method and Minorhead selections when Major changes
            setSelectedMethod('');
            setSelectedMinor('');
          }}
          style={{ marginLeft: '0.5rem' }}
        >
          <option value="">Select Major Head</option>
          {Object.keys(majorHeadData).map(major => (
            <option key={major} value={major}>{major}</option>
          ))}
        </select>
      </div>

      {/* Method Dropdown */}
      <div style={{ marginBottom: '1rem' }}>
        <label>Method:</label>
        <select
          value={selectedMethod}
          onChange={(e) => setSelectedMethod(e.target.value)}
          disabled={!selectedMajor}
          style={{ marginLeft: '0.5rem' }}
        >
          <option value="">Select Method</option>
          {selectedMajor && majorHeadData[selectedMajor].methodOptions.map(method => (
            <option key={method} value={method}>{method}</option>
          ))}
        </select>
      </div>

      {/* Minorhead Dropdown */}
      <div>
        <label>Minor Head:</label>
        <select
          value={selectedMinor}
          onChange={(e) => setSelectedMinor(e.target.value)}
          disabled={!selectedMajor}
          style={{ marginLeft: '0.5rem' }}
        >
          <option value="">Select Minor Head</option>
          {selectedMajor && majorHeadData[selectedMajor].minorHeadOptions.map(minor => (
            <option key={minor} value={minor}>{minor}</option>
          ))}
        </select>
      </div>
    </div>
  );
}

export default DependentDropdowns;

Key Details Explained #

• Data Structure: Using an object to map MajorHead values to their child options makes it trivial to add new entries later—just extend majorHeadData without touching the component logic.
• State Reset: When the MajorHead selection changes, we reset the Method and Minorhead selections to avoid showing outdated values that don't match the new Major choice.
• Disabled State: We disable the Method and Minorhead dropdowns until a MajorHead is selected, which improves UX by preventing invalid selections.
• Unique Keys: Each <option> has a unique key prop (using the option value) to keep React's rendering efficient.

This solution is flexible, easy to debug, and aligns with React best practices. You can drop this component into your app and adjust the styling or add more MajorHead options as needed.

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