var Container = React.createClass({
getInitialState() {
return {
value: null
};
},
componentDidMount() {
$(this.refs.dropdown.getDOMNode()).dropdown({
dataType: 'jsonp',
apiSettings : {
onResponse: function(githubResponse) {
var
response = {
results : []
}
;
// translate github api response to work with dropdown
$.each(githubResponse.items, function(index, item) {
response.results.push({
name: item.name,
value: item.id
});
});
return response;
},
url: '//api.github.com/search/repositories?q={query}'
},
onChange: (value) => {
this.setState({
value
});
}
});
},
componentDidUpdate() {
$(this.refs.dropdown.getDOMNode()).dropdown('refresh');
},
render: function() {
return (
<div>
<div>
<h2>Dropdown</h2>
<div className="ui fluid multiple search selection dropdown" ref="dropdown">
<input type="hidden" name="repo-ids" />
<div className="default text">Select Repos</div>
<i className="dropdown icon"></i>
<div className="menu">
</div>
</div>
</div>
<div>
<div className="ui divider"></div>
<b>Selected value</b> {this.state.value}
</div>
</div>
);
}
});
$(document).ready(function() {
React.render(<Container />, document.getElementById('container'));
});
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
body {
padding: 1em;
}
External resources loaded into this fiddle: