Javascript 我在react中提交表单，但它不是第一次提交，而是显示为空白。而且required属性也不起作用

这是代码

const Details = () => {
const [counter, setCounter] = useState(1)

用于获取表单所有值的状态，以及用于存储所有提交的详细信息状态

const [details, setDetails] = useState([])
const [ques, setQues] = useState({
    question: "",
    option1: "",
    option2: "",
    option3: "",
    option4: "",
    correct_option: ""
})

汉德尔在这里换零钱

const handelChange = (e) => {
    const name = e.target.name
    const value = e.target.value
    setQues({ ...ques, [name]: value })
}

我在这里提交表格：第一次输入的细节完全是空白的

const handelSubmit = (e) => {
    e.preventDefault()
    setDetails([...details, ques])
    console.log(details)
    setQues({ question: "", option1: "", option2: "", option3: "", option4: "", correct_option: "" })
}

return (
    <div className="details-cont">
        <div className="details">

const handelSubmit=（e）=>{
e、 预防默认值（）
setDetails（[…详细信息，问题]）
console.log（详细信息）
设置（{问题：，选项1:，选项2:，选项3:，选项4:，更正选项：}）
}
返回(

表单：必填字段不起作用

            <form >
                <div className="input_cont">
                    <label htmlFor="question">Question: {counter}</label>
                    <input required type="text" onChange={handelChange} value={ques.question} name="question" id="question" placeholder="Enter the question" />
                </div>
                <div className="input_cont">
                    <label htmlFor="option1">Option 1:</label>
                    <input type="text" required onChange={handelChange} value={ques.option1} name="option1" id="option1" placeholder="Enter the Option 1" />
                </div>
                <div className="input_cont">
                    <label htmlFor="option2">Option 2:</label>
                    <input type="text" required onChange={handelChange} value={ques.option2} name="option2" id="option2" placeholder="Enter the Option 2" />
                </div>
                <div className="input_cont">
                    <label htmlFor="option3">Option 3:</label>
                    <input type="text" required onChange={handelChange} value={ques.option3} name="option3" id="option3" placeholder="Enter the Option 3" />
                </div>
                <div className="input_cont">
                    <label htmlFor="option4">Option 4:</label>
                    <input type="text" required onChange={handelChange} value={ques.option4} name="option4" id="option4" placeholder="Enter the Option 4" />
                </div>
                <div className="toggle_cont">
                    <input className="correct_opt" required name="correct_option" type="number" onChange={handelChange} value={ques.correct_option} min="1" max="4" placeholder="correct option" />
                    <button onClick={handelSubmit} className="btn btn-add">Add</button>
                </div>
            </form>
            <button className="btn btn-create">Create</button>
        </div>
        <div className="d-left">
            Make your MCQ QUESTIONS on a GO!
        </div>
    </div >
)

问题{柜台}
备选案文1：
备选案文2：
备选案文3：
备选案文4：
添加
创造
让你的MCQ问题一气呵成！
)

---

}

实际上，只要您通过

标记提交表单，本地html验证就不会起作用。目前您只需点击按钮即可提交

您可以通过以下方式进行更改：

<form onSubmit={handleSubmit}>
  {/* ... other fields ... */}
  <div className="toggle_cont">
     <input className="correct_opt" required name="correct_option" type="number" onChange={handelChange} value={ques.correct_option} min="1" max="4" placeholder="correct option" />
     <button type="submit" className="btn btn-add">Add</button>
   </div>
</form>

{/*…其他字段…*/}
添加

Duplicate:关于

required

，请改为在中尝试

onSubmit={handleSubmit}

。请在类似codesandbox的东西中创建一个