React JSクリックハンドラは、実行時にどのようにDOMを更新するのですか？

Question

私はReact JSを使ってデモアプリケーションを完成させ、データをテーブルにレンダリングしています。ステータス列の項目にカーソルを合わせると、ポップアップdivが表示され、リスト内の3つのオプションのいずれかをクリックできます。アイテムの1つがクリックされると、クリックハンドラを実行できるようになりましたが、DOMを変更して新しくクリックされたステータスを表示し、更新フィールドを新しい現在のものに変更する方法がわかりません、日付。

私は現在、ソースデータを変更して再レンダリングしようとしていますが、運がないとしています。 Reactでこれを行うための慣用的でシンプルな方法を教えてください。ここで

は私のクリックハンドラである：

 statusDropdownClickHandler: function(e) { 
      var el = e.currentTarget.closest("tr").firstChild; 
      var title = el.innerHTML; 
      var newStatus = e.currentTarget.innerHTML; 

      e.currentTarget.closest("td").innerHtml = newStatus; 

      for (i=0; i < requests.length; i++) { 
      if (requests[i].title === title) { 
        var newDate = new Date(); 

        requests[i].status = newStatus; 
       requests[i].updated_at = String(newDate); 
      } 
      } 
      e.currentTarget.closest("td").firstChild.style.display = 'none'; 
      this.render(); 
     }, 

、ここでは、ページのこのセクションをレンダリングする機能です。

renderRows: function() { 
     var self = this; 
     var shouldIRender = (row) => 
     (this.state.filter === row.status || this.state.filter === ""); 

     var sortedRequests = requests.sort(function(a,b) { 
     return new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime(); 
     }); 

     for (i=0; i < sortedRequests.length; i++) { 
     sortedRequests[i].created_at = sortedRequests[i].created_at.split(" ")[0]; 
     sortedRequests[i].updated_at = sortedRequests[i].updated_at.split(" ")[0]; 
     } 

     return sortedRequests.filter(shouldIRender).map(function(row, j) { 
     return <tr key={j}> 
       <td style={tdStyle}>{row.title}</td> 
       <td style={statusStyle} 
       onMouseOver={self.statusHoverHandler} 
       onMouseOut={self.statusBlurHandler} 
       onChange={self.statusChangeHandler}> 
       <div style={statusDropdownStyle}> 
        {statusItems.map(function(item, j) { 
        return (
        <div key={j} style={dropdownDivStyle} 
//see here -----> onClick={self.statusDropdownClickHandler} 
         onMouseOver={self.statusDropdownHoverHandler} 
         onMouseOut={self.statusDropdownBlurHandler}>{item.text}</div> 
       )})} 
       </div> 
       {row.status}</td> 
       <td style={tdStyle}>{row.created_at}</td> 
       <td style={tdStyle}>{row.updated_at}</td> 
       <td style={tdStyle}><a href="#" onClick={self.delete}>delete</a></td> 
       </tr>        
     }) 
    }, 

そして、ここではa link to a current JS fiddle

感謝です！

Answer 1

イベントハンドラで状態を変更すると、レンダリングがトリガされます。現在の状態に基づいて、レンダリングメソッドでDOM要素とスタイルをレンダリングします。