preventDefault() 似乎是阻塞代码，无法完成提交功能

Question

这与第 56-63 行的 handleEditSubmit 函数有关，该函数在从第 94 行开始提交表单时调用。我在这里的唯一目标是触发有关提交的警报，并随后重新加载页面。一旦我确定函数执行正确，我就会添加 axios 请求。

提交表单时，肯定会调用该函数，因为会触发第一个警报。但是，下一行preventDefault() 之后的任何内容都不会执行。

我也尝试将此功能设置为提交按钮的“onClick”事件，没有preventDefault()。奇怪的是，这会重新加载页面，但不会触发警报。

谁能告诉我我在这里做错了什么？提前致谢。

这是我的代码：

import { useState } from 'react'
import styles from './ShowListing.module.css'

// SHOW OBJECT SHAPE:
//     eventTitle: null,
//     location: null,
//     date: null,
//     time: null,
//     ticket: null,
//     desc: null,
//     image: null

const ShowListing = (props) => {
    // Toggle deletion warning
    const [deleteWarning, setDeleteWarning] = useState(false)
    const [editForm, setEditForm] = useState(false)
    const [formValues, setFormValues] = useState({
        eventTitle: null,
        location: null,
        date: null,
        time: null,
        ticket: null,
        desc: null,
        image: null
    })

    const dateConvert = () => {
        // covert props.param.date to format "year-month-day", call for date input default value
        const dateArr = props.params.date.split('-')
        const year = dateArr.pop()
        dateArr.unshift(year)
        return dateArr.join('-')
    }

    const timeConvert = () => {
        // covert props.param.time to 24-hour format, call for time input default value
        const timeArr = props.params.time.split(' ')
        const time = timeArr[0].split(":")
        if (timeArr[1] === 'PM')
            time[0] = ((parseInt(time[0])) + 12).toString()
        if (parseInt(time[0]) < 10)
            time[0] = "0" + time[0]
        return time.join(":")
    }

    const handleDelete = () => {
        // TODO: delete request with props.params._id

        // Alert deletion and reload page
        alert(`SHOW DELETED:\n${props.params.eventTitle}`)
        window.location.reload()
    }

    // PREVENT DEFAULT IS BLOCKING ALERT AND SUBMISSION
    const handleEditSubmit = (e) => {
        // TODO: post request for show update with props.params._id
        
        alert(`SUBMITTING...`)
        e.preventDefault()
        alert(`SHOW EDITED:\n${formValues.eventTitle}\nFORMERLY:\n${props.parans.eventTitle}`)
        window.location.reload()
    }

    return (
        <div className={styles.temp}>
        <div className={styles.container}>
            {
                deleteWarning &&
                <div className={styles.deleteWarning}>
                    <div><p>Delete this show listing?</p></div>
                    <div><button className={`${styles.deleteButton} ${styles.deleteYes}`} onClick={handleDelete}>Yes</button></div>
                    <div><button className={`${styles.deleteButton} ${styles.deleteNo}`} onClick={() => setDeleteWarning(false)}>No</button></div>
                </div>
            }
            <div className={styles.title}>
                <p>{props.params.eventTitle}</p>
            </div>
            <div className={styles.date}>
                <p>{`${props.params.date} -- ${props.params.time}`}</p>
            </div>
            <div className={styles.edit} onClick={() => setEditForm(true)}>
                <img src="images/icons8-edit-30.png" />
            </div>
            <div className={styles.delete} onClick={() => setDeleteWarning(true)}>
                <img src="images/icons8-trash-30.png" />
            </div>
            <br/>
        </div>
        {
            editForm &&
            <div className={styles.formContainer}>
                <div className={styles.formFrame}>
                    <form id="editForm" onSubmit={e => handleEditSubmit(e)}>
                        <label className={styles.formLabel} htmlFor="eventTitle">Event Title: </label>
                        <br />
                        <input className={styles.fieldInput} type="text" name="eventTitle" defaultValue={props.params.eventTitle} onChange={e => setFormValues({...formValues, eventTitle: e.target.value})}/>
                        <br />
                        <label className={styles.formLabel} htmlFor="location">Location: </label>
                        <br />
                        <input className={styles.fieldInput} type="text" name="location" defaultValue={props.params.location} onChange={e => setFormValues({...formValues, location: e.target.value})} />
                        <br />
                        <label className={styles.formLabel} htmlFor="date">Date: </label>
                        <br />
                        <input className={styles.fieldInput} type="date" name="date" defaultValue={dateConvert()} onChange={e => setFormValues({...formValues, date: e.target.value})}/>
                        <br />
                        <label className={styles.formLabel} htmlFor="time">Time: </label>
                        <br />
                        <input className={styles.fieldInput} type="time" name="time" defaultValue={timeConvert()} onChange={e => setFormValues({...formValues, time: e.target.value})}/>
                        <br />
                        <label className={styles.formLabel} htmlFor="ticket">Ticket: </label>
                        <br />
                        <input className={styles.fieldInput} type="text" name="ticket" defaultValue={props.params.ticket} onChange={e => setFormValues({...formValues, ticket: e.target.value})}/>
                        <br />
                        <br />
                        <textarea className={styles.formDesc} name="desc" placeholder="Event Description" rows="8" defaultValue={props.params.desc} onChange={e => setFormValues({...formValues, desc: e.target.value})}/>
                        <br />
                        <label className={styles.formLabel} htmlFor="image">Please update image &#40;15MB or less&#41;: </label>
                        <input type="file" id="image" name="image" accept="image/jpeg" onChange={e => setFormValues({...formValues, image: e.target.files})}/>
                        <br />
                        <br />
                        <button className={styles.submit} name="submit" type="submit">Submit</button>
                        <button onClick={() => setEditForm(false)}>Cancel</button>
                    </form>
                </div>
            </div>
        }
        </div>        
    )
}

export default ShowListing

Answer 1

解决了这个问题。事实证明这与 preventDefault 完全无关。我在第 59 行有一个错字。它试图读取一个不存在的变量，这就是它挂起的地方。哎呀。那好吧。问题解决了。