類型錯誤：無法在 ReactJS 中讀取 null 的屬性“addEventListener”

Question

我已經嘗試在 index.html 的關閉 body 標記之后插入 script 標記。

我也試過改變myForm.addEventListener('submit', addRecord); 到document.addEventListener('submit', addRecord); 它剛剛改變但仍然在我的 main.js 中的 addRecord 函數的if(nameInput.value === '' || jobInput.value === '')中拋出相同的空錯誤

主文件

const myForm = document.querySelector('#my-form');
const nameInput = document.querySelector('#name');
const jobInput = document.querySelector('#job');
const employeeList = document.querySelector('#employeeList');

myForm.addEventListener('submit', addRecord);

export function addRecord() {

    if(nameInput.value === '' || jobInput.value === '') {
        alert('Please complete all the fields.');
    } 
    else {
        const li = document.createElement('li');
        li.appendChild(document.createTextNode(`${nameInput.value} (${jobInput.value})`));
        employeeList.appendChild(li);
        nameInput.value = "";
        jobInput.value = "";
    }
}

export function clearFields() {
    nameInput.value = "";
    jobInput.value = "";
}

應用程序.js

import React from 'react';
import './App.css';
import { addRecord, clearFields } from './main.js';

function App() {
  return (
    <div className="main-container">
        <table className="main">
            <tr className="split">
              <td>
                <div className="left">
                  <form id="my-form">
                    <label for="name">Name:</label><br />
                      <input className="text" type="text" id="name" /><br /><br />
                      <label for="job">Job Detail:</label><br />
                      <input className="text" type="text" id="job" /><br /><br />
                      <input className="btn-add" type="submit" value="Add" onclick={addRecord()}/>
                      <input className="btn-clear" type="button" value="Clear" onclick={clearFields()} />
                  </form>  
                </div>
              </td>
              <td>
                <div className="right">
                  <p>Employee List</p>
                  <ul className="employeeList" id="employeeList"></ul>
                </div>
              </td>
            </tr>
        </table>
    </div>
  );
}

export default App;

Answer 1

在 React 中，您可以使用 Formik 來處理表單。

但是如果你真的想這樣做，你必須把你的腳本放在 componentDidMount 或 useEffect 中，因為你選擇了一個尚未在 dom 中呈現的元素，所以你會得到這個錯誤。