Javascript 未应用addEventListener_Javascript_Reactjs_Forms_Google Cloud Firestore

Javascript 未应用addEventListener

javascript reactjs forms google-cloud-firestore

Javascript 未应用addEventListener,javascript,reactjs,forms,google-cloud-firestore,Javascript,Reactjs,Forms,Google Cloud Firestore,所以我在React JS中有一个表单，我使用Firebase Firestore作为数据库。我想在单击submit按钮时将数据保存到数据库中。因此，我添加了一个事件侦听器，用于侦听submit按钮。但是由于某些原因，事件侦听器没有被应用不工作的部分 $(window).on('load', function () { const form = document.querySelector('#donatorDetails'); form.addEve

所以我在React JS中有一个表单，我使用Firebase Firestore作为数据库。我想在单击submit按钮时将数据保存到数据库中。因此，我添加了一个事件侦听器，用于侦听submit按钮。但是由于某些原因，事件侦听器没有被应用

不工作的部分

    $(window).on('load', function () {

        const form = document.querySelector('#donatorDetails');

        form.addEventListener('submit', (e) => {
            e.preventDefault();
            db.collection('donators').add({
                name: form.name.value,
                district: form.district.value,
                phoneNumber: form.phoneNumber.value,
                bloodGroup: form.bloodGroup.value,
                vaccineDays: form.vaccineDays.value
            });
            form.name.value = '';
            form.district.value = '';
            form.phoneNumber.value = '';
            form.bloodGroup.value = '';
            form.vaccineDays.value = '';
        });

    });

整个JS

import React from 'react'
import './Form.css'
import { db } from './firebase'
import $ from 'jquery';


function Form() {


    // saving data for some reason


    $(window).on('load', function () {

        const form = document.querySelector('#donatorDetails');

        form.addEventListener('submit', (e) => {
            e.preventDefault();
            db.collection('donators').add({
                name: form.name.value,
                district: form.district.value,
                phoneNumber: form.phoneNumber.value,
                bloodGroup: form.bloodGroup.value,
                vaccineDays: form.vaccineDays.value
            });
            form.name.value = '';
            form.district.value = '';
            form.phoneNumber.value = '';
            form.bloodGroup.value = '';
            form.vaccineDays.value = '';
        });

    });



    return (
        <div className="Form" onLoad="{">
            <div>
                <meta charSet="UTF-8" />
                <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
                <meta name="viewport" content="width=device-width, initial-scale=1.0" />
                <title>Document</title>
                <link rel="preconnect" href="https://fonts.gstatic.com" />
                <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@500&display=swap" rel="stylesheet" />
                <div>
                    <div id="form-style">
                        <form id="donatorDetails" onKeyPress={e => {
                            if (e.key === 'Enter') e.preventDefault();
                        }} >
                            <label htmlFor="name" id="name-label">Your Full Name:</label>
                            <input name="name" type="text" id="name" required />
                            <br></br>

                            <label htmlFor="district" id="district-div">Choose Your District:</label>
                            <input type="text" name="district" list="districtname" id="district-div" required />
                            <datalist id="districtname">
                                <option value="Entire Karnataka"></option>
                                <option value="Bagalkot">
                                </option><option value="Ballari (Bellary)">
                                </option><option value="Belagavi (Belgaum)">
                                </option><option value="Bengaluru (Bangalore) Rural">
                                </option><option value="Bengaluru (Bangalore) Urban">
                                </option><option value="Bidar">
                                </option><option value="Chamarajanagar">
                                </option><option value="Chikballapur">
                                </option><option value="Chikkamagaluru (Chikmagalur)">
                                </option><option value="Chitradurga">
                                </option><option value="Dakshina Kannada">
                                </option><option value="Davangere">
                                </option><option value="Dharwad">
                                </option><option value="Gadag">
                                </option><option value="Hassan">
                                </option><option value="Haveri">
                                </option><option value="Kalaburagi (Gulbarga)">
                                </option><option value="Kodagu">
                                </option><option value="Kolar">
                                </option><option value="Koppal">
                                </option><option value="Mandya">
                                </option><option value="Mysuru (Mysore)">
                                </option><option value="Raichur">
                                </option><option value="Ramanagara">
                                </option><option value="Shivamogga (Shimoga)">
                                </option><option value="Tumakuru (Tumkur)">
                                </option><option value="Udupi">
                                </option><option value="Uttara Kannada (Karwar)">
                                </option><option value="Vijayapura (Bijapur)">
                                </option><option value="Yadgir">
                                </option></datalist>

                            <br></br>
                            <label htmlFor="phone-number">Phone Number:</label>
                            <input type="number" id="phone-number" name="phoneNumber" min={1000000000} max={9999999999} required />

                            <br></br>
                            <label htmlFor="bloodGroup">Your Blood Group:</label>
                            <input type="text" name="bloodGroup" id="bloodGroup" list="bloodGroupList" />
                            <datalist id="bloodGroupList">
                                <option value="A+"></option>
                                <option value="A-"></option>
                                <option value="B+"></option>
                                <option value="B-"></option>
                                <option value="AB+"></option>
                                <option value="AB-"></option>
                            </datalist>

                            <br></br>
                            <label htmlFor="vaccine-days">Number of days since you were vaccinated or infected:</label>
                            <input type="number" name="vaccineDays" id="vaccineDays" />

                            <br></br>
                            <input type="submit" id="submit-button" />

                        </form>
                    </div>
                </div>
            </div>

        </div>
    )
}


export default Form

从“React”导入React
导入“./Form.css”
从“/firebase”导入{db}
从“jquery”导入美元；
函数形式（）{
//出于某种原因保存数据
$（窗口）.on（'load'，函数（）{
const form=document.querySelector（“#donatorDetails”）；
表格.addEventListener（'submit'，（e）=>{
e、 预防默认值（）；
db.collection（“捐赠者”）。添加({
名称：form.name.value，
地区：form.district.value，
phoneNumber:form.phoneNumber.value，
bloodGroup:form.bloodGroup.value，
接种天数：form.vaccineDays.value
});
form.name.value=''；
form.district.value=''；
form.phoneNumber.value=''；
form.bloodGroup.value=''；
form.vaccineDays.value=''；
});
});
返回(
文件
{
如果（e.key==='Enter'）e.preventDefault（）；
}} >
您的全名：



选择您所在的地区：



电话号码：



您的血型：



接种或感染疫苗后的天数：



)
}
导出默认表单

每次呈现表单时，您都会添加一个事件侦听器，以便在窗口触发

加载

事件时，发生一些事情

这：

堆积大量重复的事件处理程序
从不激发，因为加载事件发生在窗体第一次呈现之前

通常，在使用React时从不将事件处理程序直接绑定到DOM
（也有一些例外，但这些都是棘手的边缘案例，通常涉及第三方库生成的内容）
如果需要提交事件处理程序，请将其放入表单的
onSubmit
prop中

<form id="donatorDetails" onSubmit={ submitHandlerFunction } ...

您不需要添加事件侦听器。您可以直接在组件内定义函数，并将其传递给表单的onSubmit属性函数形式（）{ 常量handleSubmit=（e）=>{ e、预防默认值（）； db.集合（“捐赠者”）。添加({ 名称：form.name.value，地区：form.district.value， phoneNumber:form.phoneNumber.value， bloodGroup:form.bloodGroup.value，接种天数：form.vaccineDays.value， }); form.name.value=“”； form.district.value=“”； form.phoneNumber.value=“”； form.bloodGroup.value=“”； form.vaccineDays.value=“”； }; 返回{/*表单体*/}； } 导出默认表单您的应用程序不打算将addEventListener 与React一起使用。因此，我将代码包装在一个函数中。并在提交时触发它。非常感谢。