Semantic.ui dropdown not working with React.js

Question

I'm trying to use Semantic.ui's dropdown in my Meteor.js + React.js app. Everything else with Semantic.ui works fine, but I can't make the dropdown menu work. Here's my code:

NavigationMain = React.createClass({

  componentDidMount() {
    $('.ui.dropdown.right').dropdown();
  },

  componentDidUpdate() {
      $('.ui.dropdown.right').dropdown('refresh');
  },

  _openChat(){
    console.log("click");
  },

  render(){
    return (
      <div className="ui top attached menu">
        <div className="ui dropdown icon item" onClick={this._openChat}>
          <i className="comments outline icon"></i>
        </div>
        <div className="ui dropdown right icon item">
          <i className="wrench icon"></i>
          <div className="menu">
            <div className="item">
              <i className="dropdown icon"></i>
              <span className="text">New</span>
              <div className="menu">
                <div className="item">Document</div>
                <div className="item">Image</div>
              </div>
            </div>
            <div className="item">
              Open...
            </div>
            <div className="item">
              Save...
            </div>
            <div className="item">Edit Permissions</div>
            <div className="divider"></div>
            <div className="header">
              Export
            </div>
            <div className="item">
              Share...
            </div>
          </div>
        </div>
      </div>
    );
  }
});

I have also tried using Reacts ref attribute to reference the element like this: $(this.refs.menu).dropdown();

But it doesn't seem to help either.

All the examples I've found, for example the Semantic.ui's official integration doc (http://semantic-ui.com/introduction/integrations.html), work like this and I've made it work before without React. That's why I'm starting to feel helpless.

Any help with this would be appreciated.

athap · Accepted Answer · 2016-02-18 03:22:34Z

Works for me.

    var Content = React.createClass({
    componentDidMount: function() {
      $('.ui.dropdown').dropdown()
    },
    render: function () {
        return <div className="ui dropdown">
          <div className="text">File</div>
          <i className="dropdown icon" />
          <div className="menu">
          <div className="item">New</div>
          <div className="item">
          <span className="description">ctrl + o</span>
          Open...
          </div>
          <div className="item">
          <span className="description">ctrl + s</span>
          Save as...
          </div>
          <div className="item">
          <span className="description">ctrl + r</span>
          Rename
          </div>
          <div className="item">Make a copy</div>
          <div className="item">
          <i className="folder icon" />
          Move to folder
          </div>
          <div className="item">
          <i className="trash icon" />
          Move to trash
          </div>
          <div className="divider"></div>
          <div className="item">Download As...</div>
          <div className="item">
          <i className="dropdown icon" />
          Publish To Web
          <div className="menu">
          <div className="item">Google Docs</div>
          <div className="item">Google Drive</div>
          <div className="item">Dropbox</div>
          <div className="item">Adobe Creative Cloud</div>
          <div className="item">Private FTP</div>
          <div className="item">Another Service...</div>
          </div>
          </div>
          <div className="item">E-mail Collaborators</div>
          </div>
        </div>
    }
});

ReactDOM.render(
    <Content />,
    document.getElementById('container')
);
Here is a fiddle
https://jsfiddle.net/85z7o3n2/

Collectives™ on Stack Overflow

Semantic.ui dropdown not working with React.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related