切換行使用HTML

在app.js在react.jsnode.jsexpress應用，切換行使用HTML

var HomePage = React.createClass({ 
    getInitialState: function() { 
...

我動態創建行。我可以在瀏覽器中看到很好的行。我寫的切換隱藏代碼/顯示tr

... 
toggleRow : function(id) { 
     var row = document.getElementById(id); 
     if (row.style.display == '') { 
     row.style.display = 'none'; 
     } 
     else { 
     row.style.display = ''; 
     } 
    }, 
...

在Firefox「檢查元素」我看到正確的ID（外部HTML）的行。

<tr id="optionA" data-reactid=".0.1.0.1:$=1PGC150.0"><td data-reactid=".0.1.0.1:$=1PGC150.0.0"></td><td data-reactid=".0.1.0.1:$=1PGC150.0.1"></td><td data-reactid=".0.1.0.1:$=1PGC150.0.2"></td><td data-reactid=".0.1.0.1:$=1PGC150.0.3"></td><td data-reactid=".0.1.0.1:$=1PGC150.0.4"></td><td data-reactid=".0.1.0.1:$=1PGC150.0.5"></td><td data-reactid=".0.1.0.1:$=1PGC150.0.6"></td><td data-reactid=".0.1.0.1:$=1PGC150.0.7"></td><td data-reactid=".0.1.0.1:$=1PGC150.0.8"></td><td data-reactid=".0.1.0.1:$=1PGC150.0.9"></td><td data-reactid=".0.1.0.1:$=1PGC150.0.a">.PGC150</td><td data-reactid=".0.1.0.1:$=1PGC150.0.b">34.60</td><td data-reactid=".0.1.0.1:$=1PGC150.0.c"></td><td data-reactid=".0.1.0.1:$=1PGC150.0.d">5</td><td data-reactid=".0.1.0.1:$=1PGC150.0.e">5</td><td data-reactid=".0.1.0.1:$=1PGC150.0.f"></td><td data-reactid=".0.1.0.1:$=1PGC150.0.g"></td><td data-reactid=".0.1.0.1:$=1PGC150.0.h"></td><td data-reactid=".0.1.0.1:$=1PGC150.0.i"></td><td data-reactid=".0.1.0.1:$=1PGC150.0.j"></td><td data-reactid=".0.1.0.1:$=1PGC150.0.k"></td><td data-reactid=".0.1.0.1:$=1PGC150.0.l"></td><td data-reactid=".0.1.0.1:$=1PGC150.0.m"></td><td data-reactid=".0.1.0.1:$=1PGC150.0.n"></td><td data-reactid=".0.1.0.1:$=1PGC150.0.o"></td></tr>

但是，切換行的代碼對網頁上的表格沒有任何影響。

toggleRow("optionA");

它是正確的node.js中/反應/ Express應用程序使用HTML代碼風格document.getElementById(id)？如果不是，通過ID切換行的正確替換代碼是什麼？

來源

2017-02-14 Ivan

是的，在React應用程序中的'document.getElementById'完全沒問題。 Node和express雖然沒有文檔對象，但在創建快速服務器時，您無法使用該API。 – 1252748

我對你的迴應有些困惑。看起來你說這是完全正常的，但後來說沒有文檔對象？上面的代碼不起作用，所以我不知道如何考慮你的答案。 – Ivan

如果您的代碼在Web瀏覽器中運行，並且在DOM中存在一個ID爲變量'id'的ID的元素，則代碼應該正常工作。然而，Express並不打算在具有文檔對象的上下文中運行。這是一臺服務器。它提供瀏覽器最終在其文檔對象中呈現的文件，但是在快速應用程序中的「document ._____」會給你一個參考錯誤。 – 1252748

我想可以在React程序中使用getElementById()，但我個人僅在需要使用非React庫（如D3）時使用。

在你的情況下，更陣營-Y的方式來實現這一目標將是：

店每行的可見性狀態在你的陣營元素（道具或狀態）
撥動這個布爾內您toggleRow功能
使用這個布爾呈現不每一行

與ul列表（未測試）快速樣品：

const handleToggleElement = (e, that) =>() => { 
    // copy the element and finds its index in the list 
    const newE = Object.assign({}, e) 
    const i = that.state.list.indexOf(e) 
    // copies the list and modifies the element 
    const newList = [...that.state.list] 
    newE.shouldDisplay = e.shouldDisplay ? false : true 
    newList[i] = newE 

    that.setState({ list: newList }) 
} 


const myList = React.createClass({ 
    render: function(props) { 
     return 
      <ul> 
      { 
      this.state.list.filter(e => e.shouldDisplay) 
       .map(e => 
       <li> 
        e.content 
        (<a onClick={handleToggleElement(e, this)}>(hide)</a>) 
       </li>) 
      } 
      </ul> 
    } 
})

來源

2017-02-14 05:36:52

切換行使用HTML

回答

相關問題