SelectBoxIt & ReactJS support needed
Question
SelectBoxIt allows you to replace ugly and hard-to-use HTML select boxes with gorgeous and feature rich drop downs.
I implemented the SelectBoxIt and the <select> inside my render(return()) method didn't recognize it. 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.
In brief, I concluded that SelectBoxIt naturally doesn't support 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
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. Note that I commented the ref={s => { this.selectBox = s; }} ref={s => { this.selectBox = s; }} just to prevent the error to display.
2 answers
solution1
1 2017-11-02 08:18:35
Since this is a jquery plugin, you need to make sure to have it installed:
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. The only catch is that you need to use ref to find the node.
render() {
return <select ref={s => { this.selectBox = s; }} />
}
componentDidMount() {
$(this.selectBox).selectBoxIt();
}
Some reference here .
solution2
0 2019-08-12 10:47:35
I found that reactJS didn't "catch" onChange of the select that is replaced with SelectBoxIt but it "catch" 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.
In script tag /index.html/:
$("select").on('change',function(){
$("select").trigger('click');
});
In reactJS /SelectBox.js/:
onClickHandled that check if value is changed.
Example here: https://github.com/gshishkov/selectBoxIt-reactjs
I know it is not very elegant solution, but it was fastest and working one.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.