So rufen Sie eine onClick-Funktion beim Erstellen eines Bereichs auf, In reagieren

Question

Ich arbeite in reagieren und wenn eine Schaltfläche geklickt wird, wird ein li Element erstellt, in dem Listenelement Ich habe einen Bereich mit einem Glyphon, ich möchte erstellen ein onClick-Ereignis für das Glyphon, aber es funktioniert nicht.

Html

<ul id="list"></ul> 

dies ist die Methode, die den Listeneintrag erstellt

var listItem = document.createElement("li");    
     listItem.innerHTML = this.tokenSeries; 
     var span = document.createElement("span"); 
     span.innerHTML = "<span class='glyphicon glyphicon-remove' onClick={this.test}></span>" 
     listItem.appendChild(span); 
     document.getElementById('list').appendChild(listItem); 

diese Methode mein Test ist

@action.bound test() { 
     alert("hello"); 
    } 

Answer 1

ich seine Hoffnung gut :)

var listItem = document.createElement("li");    
    listItem.innerHTML = this.tokenSeries; 
    var span = document.createElement("span").on('click', (e) => { 
    //place to call function trigger 
    this.test(e); 
    }); 
    span.innerHTML = "<span class='glyphicon glyphicon-remove'></span>" 
    listItem.appendChild(span); 
    document.getElementById('list').appendChild(listItem); 

Answer 2

nach dem HTML-Einstellung Legen Sie die OnClick Methode, um die Funktion, die Sie

var listItem = document.createElement("li");    
      listItem.innerHTML = "text" 
      var span = document.createElement("span"); 
      span.innerHTML = "<span class='glyphicon glyphicon-remove' ></span>" 
      span.onclick = this.test; 
      listItem.appendChild(span); 
      document.getElementById('list').appendChild(listItem); 

anrufen möchten, oder Sie können eine Funktion direkt dort

var listItem = document.createElement("li");    
       listItem.innerHTML = "text" 
       var span = document.createElement("span"); 
       span.innerHTML = "<span class='glyphicon glyphicon-remove' ></span>" 
       span.onclick = function(){ 
       //write your function here 
       }; 
       listItem.appendChild(span); 
       document.getElementById('list').appendChild(listItem); 

Answer 3

erstellen Wenn Sie Sie es Reagieren verwenden tun können, das Reagieren Art und Weise statt durch die VanillaJS Methode des Gehens

constructor() { 
    super(); 
    this.state = { 
      list: [] 
    } 
} 

addListItem =() => { 
    var list = [...this.state.list]; 
    var ele= <li>{this.tokenSeries}<span className='glyphicon glyphicon-remove' onClick={this.test}></span></li> 
    list.push(ele) 
    this.setState({list}) 
} 

//render 

<ul id="list">{this.state.list}</ul>