How to call component on onclick of node from react-d3-tree

Question

        class WorkflowDesign extends React.PureComponent {
          state = {};

          componentDidMount() {
            const dimensions = this.treeContainer.getBoundingClientRect();
            this.setState({
              translate: {
                x: dimensions.width / 2,
                y: dimensions.height / 2
              }
            });
          }


          render() {
            return (
              <div style={containerStyles} ref={tc => (this.treeContainer = tc)}>
                <Tree
                  data={this.props.data}
                  translate={this.state.translate}
                  orientation={'vertical'}
                  collapsible={false}
                  directed={false}
                  onClick={(nodeData, evtData) => {
                    if (nodeData.type === 'FLOW') {
                      this.props.getFlowNodeStartId(nodeData);
                    }
                    return;
                  }}

                  allowForeignObjects
                  nodeLabelComponent={{
                    render: <CollapsedBreadcrumbs data={this.props.breadcrumbtartNodeId} />,
                    foreignObjectWrapper: {
                      y: 24
                    }
                  }
                  }

                />
              </div>
            );
          }
        }

I have tried with [react-d3-tee][1] but its not allowing me to call component inside onclick, So please help me out how to call component on onclick with some conditions, I have mention on the above code

I wanted to call component on onclick which I have wrote onclick function with some condition

      [1]: https://www.npmjs.com/package/react-d3-tree

What do you mean it doesn't allow you? What happens when you click? — i.brod, Mar 03 '20 at 00:33
when I click on node if "nodeData.type === 'FLOW'" is true then it will dispatch one action, till now its ok . But I want call component "," as well when above condition is true — rohit_g, Mar 03 '20 at 05:39
What do you mean you "want to call a component"? Components are not called, they are just rendered- in a declarative way, not imperative. — i.brod, Mar 03 '20 at 13:40

score 1 · Answer 1 · answered Apr 04 '20 at 17:37

1

That's how I do it:

    handleClick = (nodeData, evt) => {
       console.log(nodeData, evt);
     }

in the Tree

    onClick={this.handleClick}

answered Apr 04 '20 at 17:37

Mikhail Vyuzhanin

86
1
2

score 1 · Answer 2 · edited Mar 13 '22 at 07:56

1

I guess the props that you are looking for is onNodeClick

<Tree 
    data = {this.props.data} 
    onNodeClick = {this.handleClick.bind(this)} 
/>

and you can use it like:

handleClick(nodeData, evtData){
    // your code 
    if (nodeData.type === 'FLOW') {
         this.props.getFlowNodeStartId(nodeData);
    }
    return;
}

You can find out more in the documentation here.

edited Mar 13 '22 at 07:56

halfer

19,824
17
99
186

answered Feb 06 '22 at 08:57

The gates of Zion

311
3
5

How to call component on onclick of node from react-d3-tree

2 Answers2