<form>之外的按钮没有触发其onSubmit函数

Question

我正在创建一个弹出屏幕。这是到目前为止的代码 -

import React, { useState } from 'react'
import { TasksCollection } from '../api/TasksCollection'


const TaskForm = () => {
    const [text, setText] = useState("")
    const [clicked, setClicked] = useState(false)
    const [deadline, setDeadline] = useState("")

    const handleSubmit = (e) => {
        // e.preventDefault()

        if(deadline){
            TasksCollection.insert({
                text: text.trim(),
                createdAt: new Date(),
                deadline : deadline,
            })
        }

        setText("")
        setDeadline("")
    }


    return (
        <div>
            <form className='task-form' id = "popup-form" onSubmit = {handleSubmit}>
            <button 
                type= "button"
                onClick = {() => {
                    if(!text) return
                    setClicked(true)
                }}>
                    Set Deadline
            </button>                
        </form>

        {clicked ? 
            <div className='popup'>
                <div className="popup-inner">
                    <label>Deadline: </label>

                    <input
                        type = "date"
                        onChange = {(e) => setDeadline(e.target.value)}/>

                    <button 
                        className= "button1" 
                        form = "popup-form"
                        type = "submit"
                        onClick={() => {
                                setClicked(false)
                            }}>
                            Add Task
                    </button>

                    <button 
                        className="button2" 
                        onClick={() => {
                            setClicked(false)
                        }}>
                            &times;
                    </button>

                </div>
            </div>
        : ""}
    </div>
    )
}

export default TaskForm

我创建了一个名为

clicked

的 useState 布尔变量。当它转动

true

时，它开始渲染弹出屏幕。此弹出屏幕想要设置另一个 useState 变量的值，

deadline

。最终，我想将截止日期信息添加到我的

TasksCollection

mongoDB 集合中，这是我正在努力实现的目标。

当

clicked

变为真时，会出现弹出屏幕。该屏幕中有一个

Add Task

按钮，该按钮不会触发

handleSubmit

功能。有人能指出为什么吗？

Answer 1

这似乎是一个时间问题。我想说的是，在有机会触发表单的 submit 事件之前，该按钮已从 DOM 中删除。

我不会在提交表单的同时尝试隐藏模式，而是简单地让提交处理程序隐藏它

const handleSubmit = (e) => {
  e.preventDefault();

  setClicked(false);

  // ...
}

然后，您可以从

“添加任务”

按钮中删除 onClick 道具。