How to have access to a variable inside a React Component

Question

I have a React component DocumentEditor, which has a property container that store its content.

import React from './../../../node_modules/react';
import ReactDOM from './../../../node_modules/react-dom/client';
import {DocumentEditorContainerComponent, Toolbar, } from "./../../../node_modules/@syncfusion/ej2-react-documenteditor";
import { TitleBar } from "./title-bar";
import "./default.component.css";

DocumentEditorContainerComponent.Inject(Toolbar);

function DocumentEditor(props) {
  let hostUrl = "https://services.syncfusion.com/react/production/api/documenteditor/";
  let container;
  let titleBar;

  function rendereComplete() {
    window.onbeforeunload = function () {
      return "Want to save your changes?";
    };

    container.documentEditor.pageOutline = "#E0E0E0";
    container.documentEditor.acceptTab = true;
    container.documentEditor.resize();

    titleBar = new TitleBar(
      document.getElementById("documenteditor_titlebar"),
      container.documentEditor,
      true
    );
    onLoadDefault();
  }

  return (
    <div className="control-pane">
      <div className="control-section">
        <div id="documenteditor_titlebar" className="e-de-ctn-title"></div>
        <div id="documenteditor_container_body">
          <DocumentEditorContainerComponent
            id="container"
            ref={(scope) => {
              container = scope;
              rendereComplete();
            }}
            style={{ display: "block" }}
            height={"590px"}
            serviceUrl={hostUrl}
            enableToolbar={true}
            locale="en-US"
          />
        </div>
      </div>
    </div>
  );

  function onLoadDefault() {
    container.documentEditor.open(JSON.stringify(props.value));
    container.documentEditor.documentName = "Getting Started";
    titleBar.updateDocumentTitle();
    container.documentChange = () => {
      titleBar.updateDocumentTitle();
      container.documentEditor.focusIn();
    };
  }
}

export default DocumentEditor;

Besides I have a component DocumentEditorCOntainer that is responsable to initialize the component DocumentEditor

import React from './../../../node_modules/react';
import ReactDOM from './../../../node_modules/react-dom/client';
import DocumentEditor from './DocumentEditor';


const DocumentEditorContainer = (props) => {
    const root = ReactDOM.createRoot(document.getElementById(props.container));
    root.render(
      <React.StrictMode>
        <DocumentEditor value = {props.value}/>
      </React.StrictMode>
    );
}

window.DocumentEditorContainer = DocumentEditorContainer;

Those components are consumed inside a JSF page. This page has a button save that assign the content of DocumentEditor to a bean, My question is, how do I have access to the variable container of DocumentEditor from the JSF page?

Does this answer your question? [How to pass JavaScript variables as parameters to JSF action method?](https://stackoverflow.com/questions/28591301/how-to-pass-javascript-variables-as-parameters-to-jsf-action-method) — Jasper de Vries, Jun 26 '23 at 12:16
@JasperdeVries, no, the problem is that i have in jsf a function getValue(), and i need that this function has access to the variable container of DocumentEditor, because the variable container has access to the method serialize(), container.documentEditor.serialize(), and is the ouput of that function what i need to use in the method getValue(). — Eduardo Roque, Jun 26 '23 at 12:31
So, what you are saying is that you want to execute a JavaScript function from a bean action? — Jasper de Vries, Jun 26 '23 at 15:34
No, hay want to access to a variable defined inside a React component and pass its value to a property of my bean. — Eduardo Roque, Jun 26 '23 at 16:21

How to have access to a variable inside a React Component

0 Answers0