htmlインラインonclickハンドラをバインドするにはどうすればよいですか？

Question

私はインラインonclickハンドラを使用しようとしていますが、DOM要素自体のものではなく、このコンテキストにバインドする必要がありますが、私の人生にとってはこれを得ることができません仕事：

onclick="${this._sortTable.bind(this, i)};" 

正しい軌道に乗ってください。

私はテンプレートリテラルでES6を使用してい

：

var container = `<div class="column" style="flex: 0 0 ${WIDTH} !important" data-index="${columnObject.index}" onclick="${this._sortTable.bind(this, i)};">${columnObject.title}</div>`; 

私は次のエラーを受信して​​います：

Uncaught SyntaxError: Unexpected token (

DOM要素は間違いなく奇妙に見える：

<div class="column" style="flex: 0 0 5.555555555555555% !important" data-index="column7" onclick="function() { [native code] };">COLUMN7</div> 

Answer 1

あなたはclassのstatic機能として_sortableを定義することができますそのコードで

class FN { 
 
    constructor(prop) { 
 
    const div = `<div onclick="FN._sortable(${prop})">click</div>`; 
 
    console.log(div); 
 
    document.body.innerHTML += div; 
 
    } 
 
    static _sortable(n) { 
 
    console.log(n) 
 
    } 
 
} 
 

 
let c = new FN(123);

Answer 2

、あなたはそれをDOMに挿入されます文字列として「バインド」の出力を処理しようとしています。

最も明白な解決策は、最初にDOMオブジェクトを作成してから、ハンドラをオブジェクトにアタッチしてからオブジェクトをDOMに挿入することです。

"this"オブジェクトへのアクセスを取得するために、特に "私"エイリアスを作成した場合は、bindを使用する必要はないかもしれません。