onSubmit事件未在NEXT JS中触发

我用的是next js和redux。
我正在尝试提交一个嵌套在模态中的表单。模态体是动态的，随还原状态值的变化而变化。

'use client';

import { createSlice } from '@reduxjs/toolkit'

const modalDisplaySlice = createSlice({
    name : 'modalDisplay',
    initialState: {
        value: 'hidden',
    },
    reducers: {
        showModal : state => {state.value = ''},
        hideModal : state => {state.value = 'hidden'}
    }
});

export const {showModal, hideModal} = modalDisplaySlice.actions;
export const modalDisplayReducer = modalDisplaySlice.reducer;



let CreateRoomModal = () =>
{
    let createNewSpace = (evt) => 
    {
        evt.preventDefault();
        console.log('OK');
    }

    return (
        <div className="flex">
            <div className="basis-full">
                <h1 className="text-2xl font-bold bg-slate-800 p-4 text-white">Create Space</h1>    
                <form onSubmit={createNewSpace} className="flex flex-col p-5 md:w-10/12 w-full mx-auto">
                    <div className="mb-2 text-center">
                        <input type="text" className="px-2 py-3 border-b border-slate-800 focus:outline-0 w-full" name="organizer" placeholder="Enter you Name"/>
                    </div> 
                    <div className="text-end p-2">
                        <input type="submit" className="bg-orange-500 p-2 text-white md:text-lg text-md hover:bg-orange-600 focus:text-black" value="Create Space"/>   
                    </div>                                                                                              
                </form>
            </div>
        </div>
    );
}

let JoinRoomModal = () => 
{
    return (
        <div className="flex">
            <div className="basis-full">
                <h1 className="text-2xl font-bold bg-slate-800 p-4 text-white">Join Space</h1>    
                <form className="flex flex-col p-5 md:w-10/12 w-full mx-auto">
                    <div className="mb-2 text-center">
                       <input type="text" className="px-2 py-3 border-b border-slate-800 focus:outline-0 w-full" placeholder="Enter Auth Token"/>
                    </div> 
                    <div className="mb-2 text-center">
                        <input type="text" className="px-2 py-3 border-b border-slate-800 focus:outline-0 w-full" placeholder="Enter your Name"/>
                    </div> 
                    <div className="basis-10/12 text-end p-2">
                        <button className="bg-orange-500 p-2 text-white md:text-lg text-md hover:bg-orange-600">Join Space</button>  
                    </div>
                </form>
            </div>
        </div>    
    );
} 

const modalContentSlice = createSlice({
    name : 'modalContent',
    initialState: {
        value: '',
    },
    reducers: {
        setContent : (state, modal) => {
            switch (modal.payload)
            {
                case 'createRoomModal':
                    state.value = <CreateRoomModal/>;
                break;

                case 'joinRoomModal':
                    state.value = <JoinRoomModal/>;
                break;
            }
        }       
    }
});

export const {setContent} = modalContentSlice.actions;
export const modalContentReducer = modalContentSlice.reducer;

当我尝试提交表单时，它没有给出错误，但console.log语句也没有执行.
当我在开发人员工具上检查事件侦听器时，它显示Submit表单上没有附加任何事件侦听器

不过，Button onClick事件按预期工作。

您面临的问题可能与窗体位于动态更改组件中的事实有关。在Next.js中，当您导航到不同的页面时，整个组件树将被卸载并重新呈现，这可能导致事件侦听器被分离。
要解决此问题，您可以尝试以下方法：
1.将表单组件移到动态更改组件之外：不要在模态内容组件内部呈现表单组件，而是在组件外部呈现表单组件，并根据Redux中的状态值有条件地显示/隐藏表单组件。这样，表单组件将不会被卸载，事件侦听器将保持附加状态。
1.使用类似useEffect hook的东西附加事件侦听器：在动态变化的组件内部，可以使用useEffect钩子在组件挂载时附加事件侦听器

useEffect(() => {
    const form = document.getElementById('createRoomForm');
    form.addEventListener('submit', createNewSpace);
  }, []);

onSubmit事件未在NEXT JS中触发

1条答案

相关问题

热门标签

最新问答