Question

我正在尝试在Meteor.js + React.js应用中使用Semantic.ui的下拉列表。 Semantic.ui的其他所有工作正常，但我无法使下拉菜单工作。这是我的代码：

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>
    );
  }
});

我也尝试使用Reacts ref属性来引用这样的元素： $(this.refs.menu).dropdown();

但它似乎也没有帮助。

我发现的所有示例，例如Semantic.ui的官方集成文档（http://semantic-ui.com/introduction/integrations.html）都是这样工作的，并且在没有React之前我已经使它工作了。这就是我开始感到无助的原因。

对此有任何帮助将不胜感激。

Answer 1

适合我。

    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/

Semantic.ui下拉列表不能与React.js一起使用

1 个答案: