I have dependent fields like this
<List>
<select>
<option></option>
<option></option>
</select>
<select>
<option></option>
<option></option>
</select>
<input />
</List>
If I had 5 <List/>
components.How do I add Select2 to each component.I googled online.But couldn't find any working solution.
Code below for react-select.Getting error TypeError: event.target is undefined.
var React = require('react');
var ReactDOM = require('react-dom');
var Select = require('react-select');
var Page = React.createClass({
getInitialState: function () {
return {
firstValue: ''
}
},
handleFirstLevelChange : function (event) {
this.setState({
firstValue: event.target.value
});
},
render : function(){
var options = [
{ value: '', label: 'Select an option' },
{ value: 'one', label: 'One' },
{ value: 'two', label: 'Two' }
];
return (<Select
value={this.state.firstValue}
options={options}
onChange={this.handleFirstLevelChange}
/>)
}
});
ReactDOM.render(<Page />, document.getElementById('root'));
We are using this wrapper, but there are too many problems around it.
First of all, you can't test code where it is used in NodeJS, because of this issue. Secondly we had problems with initialization of various select2 components via
defaultValue
parameter. Only one (randomly) of these elements was initalized.Therefore we going to dump it and replace with
react-select
soon.EDIT: We replaced
react-select2-wrapper
withreact-select
. It works great for us.Since you're using React, you'd be better off looking for React components rather than jQuery plugins. You can use for eaxmple
react-select
, which is pretty similar to Select2.If you are just using jquery and select2 in a react application, you can simply link the cdn for Jquery and select2 in public/index.html inside "head" tag. Then in your src/components/component.js. You can use jquery select2 like this:
Because you use the cdns in the public/.html file, you need to use window.$ to use jquery. It achieves the same thing as using select2 in a html file.
If you're using
refs
[docs], you can access the node via itsrefs
attribute in thecomponentDidMount
function and pass that toselect2()
:I don't believe this is the "React way," but this may help if you don't want to use
react-select
or some other tool.