需要SelectBoxIt和ReactJS支持
[英]SelectBoxIt & ReactJS support needed
問題描述
SelectBoxIt允許您使用華麗且功能豐富的下拉菜單替換難看且難以使用的 HTML選擇框。
我實現了SelectBoxIt，而我的render(return())方法中的<select>無法識別它。 我在網上搜索后，發現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; }} ref={s => { this.selectBox = s; }}只是為了防止顯示錯誤。
2 個解決方案
解決方案1
1 2017-11-02 08: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();
}
這里有一些參考。
解決方案2
0 2019-08-12 10:47:35
我發現reactJS不會“捕獲”被SelectBoxIt替換的select onChange ，但是會“捕獲” onClick 。 因此，對於一個使用SelectBoxIt + ReactJS項目，當select值更改並與react onChange事件結合使用時，我從jQuery了onClick觸發器。
在腳本標簽/index.html/中：
$("select").on('change',function(){
$("select").trigger('click');
});
在reactJS /SelectBox.js/中：
onClickHandled檢查值是否更改。
此處的示例： https : //github.com/gshishkov/selectBoxIt-reactjs
我知道這不是很好的解決方案，但是它是最快且可行的解決方案。
Selectboxit - 如何刷新selectboxit中的選定值
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.