需要 SelectBoxIt 和 ReactJS 支持答案

【问题标题】：SelectBoxIt & ReactJS support needed需要 SelectBoxIt 和 ReactJS 支持
【发布时间】：2017-11-02 07:47:10
【问题描述】：

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

我实现了 SelectBoxIt，而我的 render(return()) 方法中的 <select> 无法识别它。网上搜了一下，几乎只有一个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()) 中时可以工作，但render(return()) 中的<select id="sel1" > 尚未更改为 SelectBoxIt 形状。请注意，我评论了ref={s => { this.selectBox = s; }} 只是为了防止显示错误。

【问题讨论】：

显然 react 可以渲染任何有效的 javascript 或 html 内容，因此除非您期望我们使用我们的超能力来了解您编写的代码，否则您将不走运。
我再次用额外的代码更新了帖子。

标签： javascript jquery reactjs drop-down-menu selectboxit

【解决方案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。

【讨论】：

您好，谢谢您的回复。它给了我错误。 TypeError: __WEBPACK_IMPORTED_MODULE_3_jquery__(...).selectBoxIt is not a function ...... 它的意思是：$(this.selectBox).selectBoxIt();
你需要为selectboxit包含或导入js，你可以查看selctboxit的文档。也许你应该在你的 index.html 中添加它的 js 文件。

【解决方案2】：

我发现reactJS 没有“捕获”onChange 中的select，它被替换为SelectBoxIt，但它“捕获”了onClick。因此，对于一个使用SelectBoxIt + ReactJS 的项目，当select 值更改并结合反应onChange 事件时，我已经从jQuery 触发onClick。

在脚本标签/index.html/中：

$("select").on('change',function(){
      $("select").trigger('click');
});

在reactJS/SelectBox.js/:

onClickHandled 检查值是否改变。

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

我知道这不是非常优雅的解决方案，但它是最快且有效的解决方案。

【讨论】：