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; }}
只是为了防止显示错误。 最佳答案
由于这是一个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。