0 
        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>
            );
          }
        }

我已经尝试使用 [react-d3-tee][1] 但它不允许我在 onclick 中调用组件，所以请帮助我在某些条件下如何在 onclick 上调用组件，我在上面的代码中提到了

我想在 onclick 上调用组件，我在某些条件下编写了 onclick 函数 

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

2 回答 2

0

我就是这样做的：

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

在树上

    onClick={this.handleClick}
于 2020-04-04T17:37:10.950 回答
0

我猜你正在寻找的道具是onNodeClick

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

你可以像这样使用它：

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

您可以在此处的文档中找到更多信息。上帝保佑

于 2022-02-06T08:57:04.830 回答