需要SelectBoxIt和ReactJS支持
SelectBoxIt允许你用华丽且功能丰富的下拉列表替换难看且难以使用的超文本标记语言选择框。
我实现了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; }}只是为了防止显示错误。
回答 2
Stack Overflow用户
发布于 2017-11-02 16:18:35
由于这是一个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。
Stack Overflow用户
发布于 2019-08-12 18:47:35
我发现reactJS没有“捕获”被SelectBoxIt替换的select的onChange，但它“捕获”了onClick。因此，对于一个使用SelectBoxIt + ReactJS的项目，我让onClick在select值发生变化时从jQuery触发，并结合了react onChange事件。
在脚本标记/index.html/中：
$("select").on('change',function(){
$("select").trigger('click');
});在reactJS /SelectBox.js/中：
检查值是否已更改的onClickHandled。
示例如下：https://github.com/gshishkov/selectBoxIt-reactjs
我知道这不是非常优雅的解决方案，但它是最快和有效的解决方案。
https://stackoverflow.com/questions/47070080
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号