时间戳

首页 > 解决方案 > 我正在提交表单，但它没有进行第一次提交，它显示为空白。并且必需的属性也不起作用

javascript - 我正在提交表单，但它没有进行第一次提交，它显示为空白。并且必需的属性也不起作用

问题描述

这是代码。

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">

表单：必填字段无效。

            <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 >
)

}

标签： javascripthtmlreactjsforms

解决方案

实际上，只要您通过<form>标签提交表单，本机 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>

推荐阅读