0

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

我实现了 SelectBoxIt，但<select>我的render(return())方法内部无法识别它。我在网上搜索了一下，在 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; }}只是为了防止显示错误。

4

2 回答 2

1

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

npm install -S jquery

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

import * as $ from 'jquery';

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

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

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

这里有一些参考。

于 2017-11-02T08:18:35.360 回答
0

我发现reactJS没有“抓住”替换为onChange但它“抓住” 。因此，对于一个使用+的项目，我已经从值更改时结合反应事件触发。selectSelectBoxItonClickSelectBoxItReactJSonClickjQueryselectonChange

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

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

在reactJS/SelectBox.js/ 中：

onClickHandled检查值是否已更改。

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

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

于 2019-08-12T10:47:35.143 回答