Question

class someclass {


    aclick(){
        console.log("fired");
    }

     render(){
         `<div onclick="${aclick}"> blah </div>`;
     }

}

在onclick函数中引用aclick的正确方法是什么，这样当用户单击该div时，someclass.aclick实际上会被触发，就像它会做出反应一样？我尝试过

onclick="(${aclick})()"

和

onclick="${this.aclick.bind(this)}"

我无法使用它。

Answer 1

您可以使用addEventListener。

const foo = document.getElementById("yourElement");

function executeOnClick(){
    console.log("Clicked")
}

foo.addEventListener("click", executeOnClick);

Answer 2

react render函数返回 jsx 而不是 html 。如果要从render函数返回纯文本（html），则很难调用handleClick方法，但是如果返回dom元素，它将变得更加容易。

由于dom元素是代表html的对象（很像jsx是代表html的对象）而不是html本身，因此我们可以维护对this变量的引用，以获取适当的{{1} }实例。

SomeClass

class SomeClass {
  constructor(name) {
    this.name = name;
  }
  
  handleClick() {
    console.log("fired by " + this.name);
  }

  render() {
    const html = `<div> blah </div>`;
    const elem = new DOMParser().parseFromString(html, 'text/html').body.firstElementChild;
    elem.addEventListener('click', () => {
      this.handleClick();
    });
    return elem;
  }
}

const div1 = document.querySelector('#div1');
const sc1 = new SomeClass('first');
div1.innerHTML = '';
div1.appendChild(sc1.render());

const div2 = document.querySelector('#div2');
const sc2 = new SomeClass('second');
div2.innerHTML = '';
div2.appendChild(sc2.render());

即使<div id="div1"></div> <div id="div2"></div>必须返回纯文本（html）也是可以的，但是这很麻烦，因为您必须添加一种查找render变量的方法。

没有反应的javascript模板onclick事件

2 个答案: