React + Semantic.ui dropdown() not working

react
1

How can I make Semantic.ui’s dropdown() function work inside React?

I’m pretty green so I’m not sure how the function actually works, but I tried both running it both in onClick function and in componentDidMount() like in the Semantic.ui’s integration example (http://semantic-ui.com/introduction/integrations.html).

I tried referencing the dropdown element both with $(’.ui.dropdown’) and Reacts ref attribute with no luck with either. Former gave nothing and the latter gave error “this.refs.menu.dropdown is not a function”.

When I tried searching for an answer I found a topic (Pains with React + Semantic UI) discussing similar issues, but did not contain a solution for me.

Any clues towards solving this would be appreciated.

2

Hi Jonne
It has been painful, but finally i succeeded in using dropdowns with react, and more especially for me in react and typescript together. I’ve created a component around the semantic-ui definition named for instance SearchSelection. I’ve a property called onChange for this component.
In your componentDidMount method, you may write such a code :

declare var $ ;
....
componentDiMount() {
    if (this.props.onChange)  {
        let ref = this.refs.mydrpdown; //mydropdown being the name of the dropdown external div in sui
        let onChange = this.props.onChange;  // must be outside the fct
        $(ref).dropdown( {
                  onChange:function(value,text, elt) {
                                        onChange(value)
                                  }
    }

   getValue() {
      let ref = this.refs.mydrpdown; 
      return $(ref).dropdown("get value");
   }

dont’t put in the fct references to states or props, or this.
I may send you the react/tscode if you want
regards
xavier