反応ソートツリーのノードを削除

Question

私はReactを使い始めています。私は自分のプロジェクトに反応ツリーコンポーネントを追加したいと思います。

removeNode(e){ 
    this.setState({ 
      treeData: removeNodeAtPath({ 
       treeData: this.state.treeData, 
       path: ????, 
       getNodeKey: ({node: TreeNode, treeIndex: number}) => { 
        console.log(number); 
        return number; 
       }, 
       ignoreCollapsed: false, 
      }) 
    }) 
} 

は、どのように私は私の場合は、パスのノードを取得することができます。 私は、関数がremoveNode（）でノードを削除しようとしていますか？マイファイル全体のApp.js ：GitHubの上

export default class TreeVera extends Component { 
constructor(props) { 
    super(props); 
    this.updateTreeData = this.updateTreeData.bind(this); 
    this.removeNode = this.removeNode.bind(this); 
    this.state = { 
     treeData: [{ 
      title: (<div> 
        <input /> 
        <button onClick={this.removeNode}>remove</button> 
       </div>), 
     }] 
    }; 
} 
removeNode(e){ 
    this.setState({ 
      treeData: removeNodeAtPath({ 
       treeData: this.state.treeData, 
       path: ????, 
       getNodeKey: ({node: TreeNode, treeIndex: number}) => { 
        console.log(number); 
        return number; 
       }, 
       ignoreCollapsed: false, 
      }) 
    }) 
} 
updateTreeData(treeData) { 
    this.setState({ treeData }); 
} 
render() { 
    return (
     <div style={{ height: 600 }}> 
      <SortableTree 
       treeData={this.state.treeData} 
       onChange={this.updateTreeData} 
      /> 
     </div> 
    ); 
} 

コンポーネント：https://github.com/fritz-c/react-sortable-tree

Answer 1

私はこの問題を解決：

export default class Tree extends Component { 

constructor(props) { 
    super(props); 
    this.updateTreeData = this.updateTreeData.bind(this); 
    this.addNode = this.addNode.bind(this); 
    this.removeNode = this.removeNode.bind(this); 
    this.state = { 
     treeData: [{ 
      title: '', 
     }] 
    }; 
} 

getChildContext() { 
      return { muiTheme: getMuiTheme(baseTheme) }; 
     } 
addNode(rowInfo){ 
    let NEW_NODE = {title: ''}; 
    let {node, treeIndex, path} = rowInfo; 
    path.pop(); 
    let parentNode = getNodeAtPath({ 
     treeData: this.state.treeData, 
     path : path, 
     getNodeKey: ({ treeIndex }) => treeIndex, 
     ignoreCollapsed : true 
    }); 
    let getNodeKey = ({ node: object, treeIndex: number }) => { 
     return number; 
    }; 
    let parentKey = getNodeKey(parentNode); 
    if(parentKey == -1) { 
     parentKey = null; 
    } 
    let newTree = addNodeUnderParent({ 
      treeData: this.state.treeData, 
      newNode: NEW_NODE, 
      expandParent: true, 
      parentKey: parentKey, 
      getNodeKey: ({ treeIndex }) => treeIndex 
    }); 
    this.setState({treeData: newTree.treeData}); 
} 

removeNode(rowInfo) { 
let {node, treeIndex, path} = rowInfo; 
this.setState({ treeData : removeNodeAtPath({ 
        treeData: this.state.treeData, 
        path: path, // You can use path from here 
        getNodeKey: ({node: TreeNode, treeIndex: number}) => { 
         // console.log(number); 
         return number; 
        }, 
        ignoreCollapsed: false, 
       }) 
    }) 
} 

updateTreeData(treeData) { 
    this.setState({ treeData }); 
} 

render() { 
    return (
     <div style={{ height: 600 }}> 
      <SortableTree 
        treeData={this.state.treeData} 
        onChange={this.updateTreeData} 
        generateNodeProps={rowInfo => ({ 
         buttons: [ 
            <div style={divStyle}> 
            <TextField 
             hintText="" 
             multiLine={true} 
             rows={1} 
             rowsMax={4} 
            /><br /> 
            <button label='Delete' 
              onClick={(event) => this.removeNode(rowInfo)}>Remove</button> 
            <button label='Add' 
              onClick={(event) => this.addNode(rowInfo)}>Add</button> 
            </div>, 
           ], 
         style: { 
            height: '50px', 
           } 
         })} 


      /> 
     </div> 
    ); 
} 

}