React樹 - 如何刪除當前節點？

我正在做一個關於創建樹的反應的教程。比如這個變量被表示爲一棵樹：React樹 - 如何刪除當前節點？

var tree = { 
    title: "howdy", 
    childNodes: [ 
     {title: "bobby"}, 
     {title: "suzie", childNodes: [ 
      {title: "puppy", childNodes: [ 
       {title: "dog house"} 
      ]}, 
      {title: "cherry tree"} 
     ]} 
    ] 
};

我想補充旁邊它刪除當前節點及其子節點每個節點的按鈕。

var TreeNode = React.createClass({ 
    getInitialState: function() { 
     return { 
      visible: true 
     }; 
    }, 
    handleDeleteClick: function() { 
     //What should I place here? 
    }, 
    render: function() { 
     console.log(this.state); 
     var childNodes; 
     var classObj; 

     if (this.props.node.childNodes != null) { 
      childNodes = this.props.node.childNodes.map(function(node, index) { 
       return <li key={index}><TreeNode node={node} /></li> 
      }); 

      classObj = { 
       togglable: true, 
       "togglable-down": this.state.visible, 
       "togglable-up": !this.state.visible 
      }; 
     } 

     var style; 
     if (!this.state.visible) { 
      style = {display: "none"}; 
     } 

     return (
      <div> 
       <h5 onClick={this.toggle} className={React.addons.classSet(classObj)}> 
        {this.props.node.title} 

        <span className="input-group-btn"> 
         <button className="btn btn-default" onClick={this.handleDeleteClick}> 
          Delete 
         </button> 
        </span> 
       </h5> 

       <ul style={style}> 
        {childNodes} 
       </ul> 
      </div> 
     ); 
    }, 
    toggle: function() { 
     this.setState({visible: !this.state.visible}); 
    } 
});

我該怎麼做？不幸的是，我不能使用數據庫作爲後端（我可以保持沒有數據庫的狀態嗎？）

來源

2015-09-25 octavian

您可能想要將樹中的內容不保存在全局變量中，而是保存在組件的狀態中。您已經爲visible變量使用了該組件的狀態，因此請嘗試類似地添加tree變量。

要保留您的狀態跨越頁面重新加載，你可以（現在）使用類似localStorage在那裏你可以在每次更改後保存您的樹對象（你必須序列化，例如使用JSON.stringify）和當加載它你加載頁面（這次使用JSON.parse進行反序列化）。由於您已經很好地抽象了TreeNode組件，因此您應該創建一個新組件（例如Tree），該組件可以：存儲樹，處理添加/刪除節點，處理存儲。 Tree組件有一個根節點TreeNode，它通過this.state.tree內容。

var Tree = React.createClass({ 
    getInitialState: function() { 
     return { 
      tree: // ... 
     }; 
    }, 
    handleDeleteClick: function(node) { 
     // do some logic here to remove `node` from whereever it occurs 
     // make sure to COPY this.state.tree and modify that, not modify the 
     // original object, then pass it to this.setState() 
    }, 
    render: function() { 
     return <TreeNode tree={this.state.tree} handleDeleteClick={this.handleDeleteClick} />; 
    } 
});

通行證handleDeleteClick下降到每一個樹節點上點擊鏈接，你應該調用傳下來的回調（this.props.handleDeleteClick），並通過在節點本身或在第一個參數一些標識符（見上面的定義）。

來源

2015-09-25 11:50:06 opatut

React樹 - 如何刪除當前節點？

回答

相關問題