Question

我需要有关在复选框上使用 onchange 事件处理程序的帮助。我在前端使用 NextJS，在后端使用 MongoDB。

我能够成功获取数据并使用 .innerHTML 显示它。但是，它不允许我使用 onchange 和其他事件处理程序调用该函数。

const Index = () => {
    const collections = [];

    fetch(`http://localhost:4000/api/d/get-all-data/${gId}`).then(res => res.json()).then(convertedData => {
        let VerifyCollections;
        let container = document.querySelector("#verifyData");

        if (convertedData !== true || convertedData.length > 0) {
            VerifyCollections = convertedData.map(record => {
                return(`
                    <div class="col-md-3 col-mb-3">
                        <div class="form-check form-switch">
                          <input 
                              class="form-check-input" 
                              type="checkbox" id="${record.verifyName}" 
                              onchange="
                                  if(this.checked === true) {
                                      collection.push(this.value);
                                      alert(collection)
                                  } else {
                                      collection.splice(collection.indexOf(this.value), 1)
                                      alert(collection)
                                  }" 
                                  value="${record.verifyName}"
                          />
                          <label class="form-check-label" for="${record.verifyName}" value="${record.verifyName}" label="${record.verifyName}">${record.verifyName}</label>
                        </div>
                    </div>
                `)
            }).join("")
            container.innerHTML = VerifyCollections;
        } else {
            container.innerHTML = `<p>No verification data found in the system</p>`
        }
    });
}

我的应用程序的目标是每当我点击从数据库加载的复选框时，它们将被添加到我声明的集合数组中。

但是，我遇到了错误：

ReferenceError: collection is not defined
HTMLInputElement.onchange

我还尝试创建一个函数，而不是在 onchange 事件中声明条件语句，但是我收到了相同的错误，即该函数未定义，即使我已经在其中声明了它并且函数外。

我也使用过状态设置器，但遇到了同样的问题。另一件事，我还尝试在 onchange 函数中声明集合数组，但它只显示/插入值而不是其他值。

onchange="
   let collection = [];
   if(this.checked === true) {
        collection.push(this.value);
        alert(collection)
   } else {
        collection.splice(collection.indexOf(this.value), 1)
        alert(collection)
   }"

以下是 NextJS HTML 代码：

<Row>
    <p><b>Account Verification:</b></p>
    <div id="verifyData" class="row"></div>
</Row>

NextJS/JavaScript - ReferenceError: 数组未定义 HTMLInputElement.onchange

0 个答案: