53 lines
1.6 KiB
JavaScript
53 lines
1.6 KiB
JavaScript
import { useState, useEffect } from 'react'
|
|
import { useFormData } from '../FormContext'
|
|
|
|
export default function BesucherBar({ title, euro, onNext, isCompleted }) {
|
|
|
|
const { formData, updateFormData } = useFormData()
|
|
|
|
// Bestimme das Feld basierend auf dem Titel
|
|
const fieldName = title.includes('Barspende') ? 'barspende' : 'besucherAnzahl'
|
|
|
|
// DEBUG: Zeige formData beim Laden
|
|
console.log('🔍 BesucherBar geladen:', title)
|
|
console.log('📊 Aktuelles formData:', formData)
|
|
console.log('🔑 Verwende Feld:', fieldName)
|
|
console.log('💾 Gespeicherter Wert:', formData[fieldName])
|
|
|
|
|
|
|
|
const [wert, setWert] = useState(formData[fieldName] || '')
|
|
|
|
// DEBUG: Zeige State-Änderungen
|
|
useEffect(() => {
|
|
console.log('✏️ Wert geändert für', fieldName, ':', wert)
|
|
}, [wert, fieldName])
|
|
|
|
|
|
const handleOK = () => {
|
|
if (wert) {
|
|
updateFormData(fieldName, wert)
|
|
|
|
console.log('✅ Gespeichert! Neues formData:', formData)
|
|
|
|
|
|
onNext()
|
|
} else {
|
|
alert('Bitte einen Wert eingeben')
|
|
}
|
|
}
|
|
|
|
return (
|
|
<section id="besucherbar">
|
|
<h3>{title}:</h3>
|
|
<div className="besadiv">
|
|
<input type='number' value={wert} onChange={(e) => setWert(e.target.value)}
|
|
placeholder={euro ? 'Betrag in Euro' : 'Anzahl'} disabled={isCompleted}
|
|
/>
|
|
{euro}
|
|
<button className="okbutton" onClick={handleOK} disabled={!wert}>OK</button>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|