dabeng / react-orgchart

It's a simple and direct organization chart plugin. Anytime you want a tree-like chart, you can turn to OrgChart.
MIT License
137 stars 113 forks source link

How to access click event from NodeTemplate custom node in react #9

Open akash-int opened 4 years ago

akash-int commented 4 years ago

Hi @dabeng I want to achieve this kind of functionally. Can you please help me out. I'm new to react & unable to find any solution.

// parent class const ParentClass = () => { const showForm = (event) => { console.log('showForm'); };

return(
   <OrganizationChart
       ref={orgchart}
       datasource={ds
       NodeTemplate={MyNode}
   </>
);

}

// NodeTemplate class const MyNode = () => {

Show Form
// want to click a button event } MyNode.propTypes = propTypes; export default MyNode; Thanks in advance.
wirasut-w commented 4 years ago

Try this

const ParentClass = () => {
     const showForm = (event) => {
          console.log('showForm');
     };

     return(
          <OrganizationChart
               ref={orgchart}
               datasource={ds}
               NodeTemplate={(nodeData) => <MyNode nodeData={nodeData.nodeData} showForm={showForm} />}
          />
     );
}

const MyNode = ({nodeData, showForm}) => {
     return (
          <button onClick={showForm}>Click me</button>
     )
}
MudulOzan commented 3 years ago

@InfinityKn you rock mate