需要SelectBoxIt和ReactJS支持

Question

SelectBoxIt allows you to replace ugly and hard-to-use HTML select boxes with gorgeous and feature rich drop downs. SelectBoxIt允许您使用华丽且功能丰富的下拉菜单替换难看且难以使用的 HTML选择框。

I implemented the SelectBoxIt and the <select> inside my render(return()) method didn't recognize it. 我实现了SelectBoxIt，而我的render(return())方法中的<select>无法识别它。 I searched the web and found almost only one source on Github that I didn't understand its recommendation, you can help me on this point. 我在网上搜索后，发现Github上几乎只有一个我不理解其建议的资源，在这一点上您可以为我提供帮助。

In brief, I concluded that SelectBoxIt naturally doesn't support ReactJS. 简而言之，我得出的结论是SelectBoxIt自然不支持ReactJS。

Hence we need a solution or trick for that. 因此，我们需要一个解决方案或技巧。

Below is sample code from their website and used it completely in my project: 以下是他们网站上的示例代码，并在我的项目中完全使用了它：

        <!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>

The following select was not affected: 以下select不受影响：

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

The <select name="test"> has worked when put it inside render(return()) but the <select id="sel1" > inside render(return()) has not been changed to be a SelectBoxIt shape. 在<select name="test">把它时，里面已经工作render(return())但在<select id="sel1" >内部render(return())没有被改变为一个SelectBoxIt形状。 Note that I commented the ref={s => { this.selectBox = s; }} 请注意，我评论了ref={s => { this.selectBox = s; }} ref={s => { this.selectBox = s; }} just to prevent the error to display. ref={s => { this.selectBox = s; }}只是为了防止显示错误。

Answer 1

Since this is a jquery plugin, you need to make sure to have it installed: 由于这是一个jquery插件，因此您需要确保已安装它：

npm install -S jquery

Then you need to import this in your script : 然后，您需要在脚本中导入它：

import * as $ from 'jquery';

Now in your react component, apply the jquery initialization in componentDidMount. 现在，在您的react组件中，在componentDidMount中应用jquery初始化。 The only catch is that you need to use ref to find the node. 唯一的问题是您需要使用ref查找节点。

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

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

Some reference here . 这里有一些参考。

Answer 2

I found that reactJS didn't "catch" onChange of the select that is replaced with SelectBoxIt but it "catch" onClick . 我发现reactJS不会“捕获”被SelectBoxIt替换的select onChange ，但是会“捕获” onClick 。 So for one project that use SelectBoxIt + ReactJS I've made onClick trigger from jQuery when select value is changed combined with react onChange event. 因此，对于一个使用SelectBoxIt + ReactJS项目，当select值更改并与react onChange事件结合使用时，我从jQuery了onClick触发器。

In script tag /index.html/: 在脚本标签/index.html/中：

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

In reactJS /SelectBox.js/: 在reactJS /SelectBox.js/中：

onClickHandled that check if value is changed. onClickHandled检查值是否更改。

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

I know it is not very elegant solution, but it was fastest and working one. 我知道这不是很好的解决方案，但是它是最快且可行的解决方案。

需要SelectBoxIt和ReactJS支持

问题描述

2 个解决方案

解决方案1
1 2017-11-02 08:18:35

解决方案2
0 2019-08-12 10:47:35

需要SelectBoxIt和ReactJS支持

问题描述

2 个解决方案

解决方案1 1 2017-11-02 08:18:35

解决方案2 0 2019-08-12 10:47:35

解决方案1
1 2017-11-02 08:18:35

解决方案2
0 2019-08-12 10:47:35