如何在React JS中实现带状态管理的图片幻灯片构建器

Hey there! Let's build this image slide builder in React step by step. I'll break down the logic and provide a complete, working component that meets all your requirements.

We'll use React's useState hook to manage the state of our slides, current edit session, and selected slide. The layout will be a simple flex container with a left sidebar for input controls and a right panel for live previews. Here's what we'll cover:

• Left sidebar with image URL input, slide selector dropdown, and action buttons
• Right panel for real-time slide preview
• Logic to save slides to an array on "Add" click
• Slide switching functionality
• Formatting all slides into the required structure on "Save All"

import React, { useState } from 'react';

const SlideBuilder = () => {
  // Store all saved slides
  const [slides, setSlides] = useState([]);
  // Current slide being edited (starts with ID 1, empty URL)
  const [currentSlide, setCurrentSlide] = useState({ id: 1, image_url: '' });
  // Track the selected slide ID for the dropdown
  const [selectedSlideId, setSelectedSlideId] = useState(1);

  // Update current slide's image URL as user types
  const handleImageUrlChange = (e) => {
    setCurrentSlide(prev => ({ ...prev, image_url: e.target.value }));
  };

  // Handle "Add New Slide" button click
  const handleAddSlide = () => {
    // Check if current slide already exists in saved slides (for edited existing slides)
    const slideExists = slides.some(slide => slide.id === currentSlide.id);
    
    if (slideExists) {
      // Update the existing slide in the array
      setSlides(prev => prev.map(slide => 
        slide.id === currentSlide.id ? currentSlide : slide
      ));
    } else {
      // Add new slide to the saved array
      setSlides(prev => [...prev, currentSlide]);
    }

    // Generate new slide with incremented ID
    const maxExistingId = slides.length > 0 
      ? Math.max(...slides.map(s => s.id)) 
      : currentSlide.id;
    const newSlide = { id: maxExistingId + 1, image_url: '' };
    
    setCurrentSlide(newSlide);
    setSelectedSlideId(newSlide.id);
  };

  // Switch slides via dropdown selector
  const handleSlideChange = (e) => {
    const targetId = parseInt(e.target.value);
    setSelectedSlideId(targetId);

    // Find the slide in saved array, or use empty slide if it's the new unsaved one
    const targetSlide = slides.find(slide => slide.id === targetId);
    setCurrentSlide(targetSlide || { id: targetId, image_url: '' });
  };

  // Handle "Save All" button click - returns required format
  const handleSaveAll = () => {
    // Include the current unsaved slide if it has content
    const finalSlides = [...slides];
    const isCurrentSaved = slides.some(slide => slide.id === currentSlide.id);
    
    if (!isCurrentSaved && currentSlide.image_url.trim() !== '') {
      finalSlides.push(currentSlide);
    }

    // Format into the required structure: { images: { slide1: {...}, slide2: {...} } }
    const formattedOutput = {
      images: finalSlides.reduce((acc, slide) => {
        acc[`slide${slide.id}`] = slide;
        return acc;
      }, {})
    };

    // Log the result (replace with API call or storage logic as needed)
    console.log('Saved Slides:', formattedOutput);
    return formattedOutput;
  };

  return (
    <div style={{ display: 'flex', gap: '2rem', padding: '2rem', maxWidth: '1200px', margin: '0 auto' }}>
      {/* Left Sidebar: Input Controls */}
      <div style={{ width: '35%' }}>
        <h3 style={{ marginBottom: '1.5rem' }}>Slide Editor</h3>
        
        {/* Image URL Input */}
        <div style={{ marginBottom: '1.5rem' }}>
          <label htmlFor="imageUrl" style={{ display: 'block', marginBottom: '0.5rem', fontWeight: '500' }}>
            Image URL
          </label>
          <input
            type="text"
            id="imageUrl"
            value={currentSlide.image_url}
            onChange={handleImageUrlChange}
            style={{ width: '100%', padding: '0.6rem', border: '1px solid #ddd', borderRadius: '4px' }}
            placeholder="https://example.com/image.jpg"
          />
        </div>

        {/* Slide Selector Dropdown */}
        <div style={{ marginBottom: '2rem' }}>
          <label htmlFor="slideSelector" style={{ display: 'block', marginBottom: '0.5rem', fontWeight: '500' }}>
            Switch Slide
          </label>
          <select
            id="slideSelector"
            value={selectedSlideId}
            onChange={handleSlideChange}
            style={{ width: '100%', padding: '0.6rem', border: '1px solid #ddd', borderRadius: '4px' }}
          >
            <option value={currentSlide.id}>Slide {currentSlide.id} (Editing)</option>
            {slides.map(slide => (
              <option key={slide.id} value={slide.id}>
                Slide {slide.id}
              </option>
            ))}
          </select>
        </div>

        {/* Action Buttons */}
        <div style={{ display: 'flex', gap: '1rem' }}>
          <button
            onClick={handleAddSlide}
            style={{ padding: '0.7rem 1.5rem', backgroundColor: '#2ecc71', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer', transition: 'background 0.2s' }}
            onMouseOver={(e) => e.target.style.backgroundColor = '#27ae60'}
            onMouseOut={(e) => e.target.style.backgroundColor = '#2ecc71'}
          >
            Add New Slide
          </button>
          <button
            onClick={handleSaveAll}
            style={{ padding: '0.7rem 1.5rem', backgroundColor: '#3498db', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer', transition: 'background 0.2s' }}
            onMouseOver={(e) => e.target.style.backgroundColor = '#2980b9'}
            onMouseOut={(e) => e.target.style.backgroundColor = '#3498db'}
          >
            Save All Slides
          </button>
        </div>
      </div>

      {/* Right Panel: Slide Preview */}
      <div style={{ width: '65%', border: '1px solid #eee', borderRadius: '8px', padding: '2rem', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
        <h3 style={{ marginBottom: '1.5rem' }}>Slide Preview</h3>
        {currentSlide.image_url ? (
          <img
            src={currentSlide.image_url}
            alt={`Preview of Slide ${currentSlide.id}`}
            style={{ maxWidth: '100%', maxHeight: '70vh', borderRadius: '8px', boxShadow: '0 2px 8px rgba(0,0,0,0.1)' }}
            onError={() => alert('Failed to load image - please check the URL')}
          />
        ) : (
          <p style={{ color: '#666', marginTop: '2rem' }}>Enter an image URL to see the preview</p>
        )}
      </div>
    </div>
  );
};

export default SlideBuilder;

Let's walk through the core logic to make sure you understand how everything works:

1. State Management

   • slides: Stores all slides that have been saved via the "Add" button
   • currentSlide: Tracks the slide you're currently editing (starts with ID 1, empty URL)
   • selectedSlideId: Keeps track of which slide is selected in the dropdown for switching

2. Adding New Slides

   • When you click "Add New Slide", we first check if the current slide already exists in the saved array (in case you edited an existing slide)
   • If it exists, we update that slide in the array; if not, we add it as a new entry
   • We then generate a new blank slide with an ID that's one higher than the largest existing ID

3. Switching Slides

   • The dropdown includes both the current unsaved slide and all saved slides
   • When you select a slide, we load its data into the editor and update the preview in real-time

4. Saving All Slides

   • We first make sure to include the current unsaved slide (if it has a valid image URL)
   • We then convert the array of slides into the exact format you requested: an object with an images property, where each key is slide{id} and the value is the slide object

To make this builder even better, you could add:

• Image Validation: Add regex checks to ensure the input is a valid URL, or use an image load handler to catch broken links (we added a basic onError handler already)
• Persistent Storage: Save slides to localStorage so they don't disappear when the page refreshes
• Delete Slide: Add a button to remove slides from the array
• Styling: Replace inline styles with CSS modules, Tailwind CSS, or a component library like Material UI for a more polished look

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