更新 react-sortable-tree 中的节点

Question

我需要将节点更新为已编辑的节点。当我编辑和更新节点时，意味着该节点要添加父节点。请帮助我解决这些问题。 我会在下面附上我的项目代码沙箱链接。

https://codesandbox.io/s/practical-goldberg-5g7nl?file=/src/App.js

Answer 1

我认为我们需要改变一些事情

需要在setcurrentNodeItem中保留event.treeIndex 像这样

const EditNode = (event) => {
   ...
   const treeIndex = event.treeIndex;
   setcurrentNodeItem(treeIndex);
}

UpdateNodeComponent value 应更改如下：

<UpdateNodeComponent
    value={treeData[currentNodeItem]?.title} // <=
    updateNode={(data) => updateNode(data)}
    action={action}
/>

和：updateNode，函数将如下所示：

const updateNode = (data) => {
  if (action === "edit") {
    settreeData((prevData) => {
      return prevData.map((item, index) => {
        if (index === currentNodeItem) {
          const updatedItem = {
            title: data
          };
          return updatedItem;
        }
        return item;
      });
    });
    setaction("add");
  } else {
    if (data) {
      settreeData([...treeData, { title: data }]);
      setaction("add");
    }
  }
};

Answer 2

要编辑节点的标题（或其他隐藏字段），您需要：

(1)。通过调用getNodeAtPath()从树数据中获取节点

(2)。编辑检索到的节点的字段

(3)。调用your_react_component.setState()重新渲染树视图，

例如：

import SortableTree, {getNodeAtPath} from 'react-sortable-tree';
...
export default class your_react_component extends Component {
    // ...... other functions like constructor , etc.
    getNodeKey(node) {
        // this example uses tree index as node key
        return node.treeIndex;
    }

    update_tree_status(evt) {
        // the function is an event handler of a button click for each node
        // step #1 : first retrieve path of the target node
        var btn_dom = evt.nativeEvent.target;
        var path = btn_dom.dataset.node_key_path;
        path = path.split(',');
        path = path.map(key => parseInt(key));
        // step #2: get the node object
        let found_node = getNodeAtPath({
           treeData: this.state.treeData,
           path    : path, // list of tree indexes on the editing node
           getNodeKey: this.getNodeKey
        });
        // step #3: updating title or other fields of the node
        // step #4: re-render the tree view
        this.setState({treeData : this.state.treeData})
    }
    // ..................
    render() {
        return <SortableTree isVirtualized={ false }
                treeData={this.state.treeData}
                onChange={this.on_state_change.bind(this)}
                generateNodeProps={
                    ({node, path, treeidx}) => ({
                        title: node.title,
                        buttons: [
                            <button data-node_key_path={ path.join(',') }
                                onClick={ this.update_tree_status.bind(this) }>
                                edit
                            </button> ,
                        ],
                    })
                }
            /> ;
    } // end of render function
};