addEventListener在函数内部不起作用

Question

我正在尝试根据这些设置生成表单...

let formItems = new Form("form-items", {
        items: [
            { id: "companyName" },
            { id: "documentKey" },
            { id: "documentDate" }
        ],
    });

里面，我生成每个输入，并尝试添加一个eventListener，但是它没有用。我在做什么错？

module.exports = function Form(formElementId, options) {

    this.state = {}

    options.items.map(item => {
        renderInput(item.id);
        this.state[item.id] = ""
    })

    function renderInput(id) {

        let html = `<input id="${id}" />`

        document.getElementById(formElementId).innerHTML += html;

        document.getElementById(id).addEventListener("input", (e) => {
            console.log(e);                      // <--------- Doesn't work
            this.state[id] = e.target.value;     // <--------- Doesn't work
            console.log(this.state);             // <--------- Doesn't work
        })
    }
}

Answer 1

代替将变量作为模板文字，您可以动态创建HTML输入元素并将事件附加到该元素上，也可以使用刚刚附加到容器中的+=来添加HTML，而不是添加HTML。

我改用此代码段：

module.exports = function Form(formElementId, options) {
  this.state = {};

  options.items.map(item => {
    renderInput(item.id);
    this.state[item.id] = "";
  });

  function renderInput(id) {
    let input = document.createElement("input");
    input.setAttribute("id", id);

    document.getElementById(formElementId).append(input);

    input.addEventListener("input", e => {
      console.log(e);
      this.state[id] = e.target.value;
      console.log(this.state);
    });
  }
};