jqwidgets-scripts-custom/demos/React/app/dropdownbutton/defaultfunctionality/app.js

jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.

import React from 'react';
import ReactDOM from 'react-dom';

import JqxDropDownButton from '../../../jqwidgets-react/react_jqxdropdownbutton.js';
import JqxTree from '../../../jqwidgets-react/react_jqxtree.js';
import JqxCheckBox from '../../../jqwidgets-react/react_jqxcheckbox.js';

class App extends React.Component
{
    componentDidMount()
    {
        this.refs.DropDownButton.setContent('<div style="position: relative; margin-left: 3px; margin-top: 4px;">Home</div>');
        this.refs.Tree.on('select', (event) =>
        {
           let item = this.refs.Tree.getItem(event.args.element);
           let dropDownContent = '<div style="position: relative; margin-left: 3px; margin-top: 4px;">' + item.label + '</div>';
           this.refs.DropDownButton.setContent(dropDownContent);
        });
        this.refs.CheckBox.on('change', (event) =>
        {
          this.refs.DropDownButton.autoOpen(event.args.checked);
        });
    }
    render()
    {
        let treeHTML = `
          <ul>
            <li item-selected='true'>Home</li>
            <li item-expanded='true'>Solutions
              <ul>
                  <li>Education</li>
                  <li>Financial services</li>
                  <li>Government</li>
                  <li>Manufacturing</li>
                  <li>Solutions
                      <ul>
                          <li>eLearning</li>
                          <li>Mobile</li>
                          <li>RIA</li>
                          <li>Training</li>
                      </ul>
                  </li>
              </ul>
            </li>
            <li>Products
              <ul>
                  <li>PC products</li>
                  <li>Mobile products</li>
                  <li>All products</li>
              </ul>
            </li>
          </ul>
        `;
    return (
        <div>
            <JqxDropDownButton ref='DropDownButton' style={{ float: 'left'}} width={150} height={25}>
                <JqxTree ref='Tree' template={treeHTML} style={{ border: 'none' }} width={200} />
            </JqxDropDownButton>
            <div style={{ float: 'left', marginTop: 5, marginLeft: 30}}>
                <JqxCheckBox ref='CheckBox' value='Open On Mouse Over'/>
            </div>
        </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('app'));