重置 HTML 表单中的字段不起作用

Question

我有一个巨大的项目即将到期，我终其一生都无法弄清楚为什么当我单击我的按钮时表单字段没有重置。有没有人有任何有用的指导？我稍后在代码中添加了复选框，使用 bootstrap，但使用 HTML 表单来制作表单，因为我想让它与 Form bootstrap 不同。

<form className='employee-details' data-transport-order="form">
                        <div className='form-group'>
                            <label htmlFor='UserFName'>* FIRST NAME</label>
                            <input type="text" className="form-control" id="employee_first_name" required value={user.employee_first_name} onChange={(e) => changeVal(e.currentTarget.id, e.currentTarget.value)}></input>
                            <label htmlFor='UserLName'>* LAST NAME</label>
                            <input className="form-control" id="employee_last_name" required value={user.employee_last_name} onChange={(e) => changeVal(e.currentTarget.id, e.currentTarget.value)}></input>
                            <label htmlFor='Username'>* USERNAME</label>
                            <input className="form-control" id="employee_username" required value={user.employee_username} onChange={(e) => changeVal(e.currentTarget.id, e.currentTarget.value)}></input>
                            <label htmlFor='UserPassword'>PASSWORD</label>
                            <input className="form-control" id="UserPassword" readOnly></input>
                            <label htmlFor='UserContactNo'>* CONTACT #</label>
                            <input className="form-control" id="employee_contact_no" required value={user.employee_contact_no} onChange={(e) => changeVal(e.currentTarget.id, e.currentTarget.value)}></input>
                            <label htmlFor='UserAddress'> STREET ADDRESS</label>
                            <input className="form-control" id="employee_street_address" value={user.employee_street_address} onChange={(e) => changeVal(e.currentTarget.id, e.currentTarget.value)}></input>
                            <label htmlFor='UserCity'> CITY</label>
                            <input className="form-control" id="employee_city" value={user.employee_city} onChange={(e) => changeVal(e.currentTarget.id, e.currentTarget.value)}></input>
                            <label htmlFor='UserState'>STATE</label>
                            <input className="form-control" id="employee_state" value={user.employee_state} onChange={(e) => changeVal(e.currentTarget.id, e.currentTarget.value)}></input>
                            <label htmlFor='UserZip'>ZIP CODE</label>
                            <input className="form-control" id="employee_zip_code" value={user.employee_zip_code} onChange={(e) => changeVal(e.currentTarget.id, e.currentTarget.value)}></input>
                            <label htmlFor='UserEmail'>EMAIL</label>
                            <input type="email" placeholder="example@gmail/yahoo.com" pattern=".+@(gmail|yahoo)\.com" className="form-control" id="employee_email" value={user.employee_email} onChange={(e) => changeVal(e.currentTarget.id, e.currentTarget.value)}></input>
                        </div>
                        <Form>
                            {
                                <div key={`default-checkbox`} className="mb-3" >
                                    <Form.Check
                                        type={'checkbox'}
                                        onChange={() => {
                                            if (isAdmin === "false" && isDriver === "true"){ //If the checkbox is already checked, user is Admin. 
                                                setDriver("false");
                                                setAdmin("true");
                                            }
                                            else { //If the checkbox is already checked, user is Driver.
                                                setDriver("true");
                                                setAdmin("false");
                                            }}
                                        } 
                                        id={`default-checkbox`}
                                        label={`Is Driver`}  
                                    />
                                </div>
                            }
                        </Form>
                   <button type="reset" className={"btn btn-primary"} onclick="document.getElementById('employee_email').value =''">RESET</button>
                   <button type="deleteUser" className={"btn btn-primary"}>DELETE USER</button>
                </form>

Answer 1

<button type="reset" className={"btn btn-primary"} onClick={() => changeVal('employee_email', '')}>RESET</button>

错误是因为“RESET”按钮上的onclick属性必须用小写字母写，而不是onclick必须是onClick。在 JSX 中，事件语法必须是 camelCase 而不是 kebab-case。

看看改正是否解决了问题，如果没有，我会建立一个页面来测试你的代码