React+NodeJS+MySQL实现下拉选择表单的技术求助

Hey there! Let's walk through how to build this dynamic dropdown with React, Node.js, and MySQL step by step—perfect for a JS/MySQL beginner. We'll split this into two main parts: setting up your Node.js backend to fetch data from MySQL, then using React and Semantic-UI to render the dropdown.

First, we'll create a simple API endpoint that pulls data from your MySQL table and sends it to the frontend.

1.1 Install Required Packages #

In your Node.js project folder, run:

npm install mysql2 express cors

• mysql2: For connecting to MySQL and running queries
• express: To build the API server
• cors: To allow cross-origin requests between your React frontend and Node backend

1.2 Connect to MySQL & Create the API Endpoint #

Create a file like server.js with this code (replace the database credentials with your own):

const express = require('express');
const mysql = require('mysql2/promise');
const cors = require('cors');

const app = express();
app.use(cors());
app.use(express.json());

// MySQL connection config
const dbConfig = {
  host: 'localhost', // usually localhost
  user: 'your_mysql_username',
  password: 'your_mysql_password',
  database: 'your_database_name'
};

// API endpoint to get dropdown options
app.get('/api/dropdown-options', async (req, res) => {
  try {
    // Create a connection to MySQL
    const connection = await mysql.createConnection(dbConfig);
    
    // Replace `your_table_name` and `value_column` with your actual table/column names
    // Example: If your table is `categories` and you want to pull the `name` column
    const [rows] = await connection.execute('SELECT id, value_column FROM your_table_name');
    
    connection.end();
    
    // Send the data to frontend (we'll use id as the dropdown key and value_column as the display text)
    res.json(rows.map(row => ({ key: row.id, value: row.id, text: row.value_column })));
  } catch (error) {
    console.error('Error fetching data:', error);
    res.status(500).json({ error: 'Failed to fetch dropdown options' });
  }
});

const PORT = 5000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

Run your server with node server.js—it should now be listening for requests on http://localhost:5000/api/dropdown-options.

Now we'll build the React component that fetches the data from your backend and renders the Semantic-UI dropdown.

2.1 Install Semantic-UI React #

In your React project folder, run:

npm install semantic-ui-react semantic-ui-css

Then import the CSS in your index.js (or App.js) to style the components:

import 'semantic-ui-css/semantic.min.css';

2.2 Build the Dropdown Component #

Create a component (like DynamicDropdown.js) or add this to your App.js:

import React, { useState, useEffect } from 'react';
import { Dropdown } from 'semantic-ui-react';

const DynamicDropdown = () => {
  const [options, setOptions] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // Fetch data from backend when component mounts
  useEffect(() => {
    const fetchOptions = async () => {
      try {
        const response = await fetch('http://localhost:5000/api/dropdown-options');
        if (!response.ok) throw new Error('Failed to fetch options');
        
        const data = await response.json();
        setOptions(data);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchOptions();
  }, []);

  if (loading) return <p>Loading dropdown options...</p>;
  if (error) return <p>Error: {error}</p>;

  return (
    <Dropdown
      placeholder="Select an option"
      fluid
      selection
      options={options}
      onChange={(e, { value }) => console.log('Selected value:', value)}
    />
  );
};

export default DynamicDropdown;

Then use this component in your app:

import DynamicDropdown from './DynamicDropdown';

function App() {
  return (
    <div style={{ padding: '2rem', maxWidth: '400px' }}>
      <h2>Dynamic MySQL Dropdown</h2>
      <DynamicDropdown />
    </div>
  );
}

export default App;

Key Notes for Beginners #

• Replace your_table_name, value_column, and MySQL credentials with your actual database details.
• The backend maps each row to a Semantic-UI Dropdown-compatible object (key, value, text)—this is required for the component to work correctly.
• We added loading and error states to make the user experience smoother (important for real-world apps!).

Test it out: Start your Node server, then run your React app (npm start). You should see a dropdown populated with values from your MySQL table!

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