Question

SelectBoxIt允许您使用华丽且功能丰富的下拉菜单替换难看且难以使用的HTML选择框。

我实现了SelectBoxIt，<select>方法中的render(return())无法识别它。我在网上搜索了几乎只有一个source on Github我不明白它的推荐，你可以帮我解决这个问题。

简而言之，我总结说SelectBoxIt自然不支持ReactJS。

因此我们需要一个解决方案或技巧。

以下是他们网站上的示例代码，并在我的项目中完全使用它：

        <!doctype html>
    <html>
    <head>
      <meta charset=utf-8>
      <title>SelectBoxIt demo</title>
      <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" />
      <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css" />
      <link type="text/css" rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
      <link rel="stylesheet" href="http://gregfranko.com/jquery.selectBoxIt.js/css/jquery.selectBoxIt.css" />
    </head>
    <body>

      <select name="test">
        <option value="SelectBoxIt is:">SelectBoxIt is:</option>
        <option value="a jQuery Plugin">a jQuery Plugin</option>
        <option value="a Select Box Replacement">a Select Box Replacement</option>
        <option value="a Stateful UI Widget">a Stateful UI Widget</option>
      </select>

      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
      <script src="http://gregfranko.com/jquery.selectBoxIt.js/js/jquery.selectBoxIt.min.js"></script>
      <script>
        $(function() {

          var selectBox = $("select").selectBoxIt();

        });
      </script>
    </body>
    </html>

以下select未受影响：

<select 
                id="sel1" 
                // ref={s => { this.selectBox = s; }}
                onChange={ event => this.onSelectChange(event.target.value) }
                >
                {options}
            </select>

将<select name="test">置于render(return())内，但<select id="sel1" >内的render(return())尚未更改为SelectBoxIt形状。请注意，我对ref={s => { this.selectBox = s; }}进行了评论，以防止显示错误。

Answer 1

由于这是一个jquery插件，因此您需要确保安装它：

npm install -S jquery

然后你需要在你的脚本中导入它：

import * as $ from 'jquery';

现在在您的react组件中，在componentDidMount中应用jquery初始化。唯一的问题是您需要使用ref来查找节点。

render() {
  return <select ref={s => { this.selectBox = s; }} />
}

componentDidMount() {
  $(this.selectBox).selectBoxIt();
}

一些参考here。

Answer 2

我发现reactJS并未{捕获到onChange的{{1}}中select，而是{捕获} SelectBoxIt。因此，对于一个使用onClick + SelectBoxIt的项目，当ReactJS的值更改并与react onClick结合使用时，我从jQuery触发了select事件。

在脚本标签/index.html /：

onChange

在$("select").on('change',function(){ $("select").trigger('click'); }); /SelectBox.js/中：

reactJS检查值是否更改。

此处的示例：https://github.com/gshishkov/selectBoxIt-reactjs

我知道这不是很好的解决方案，但是它是最快且可行的解决方案。

SelectBoxIt＆amp;需要ReactJS支持

2 个答案: