I have dependent fields like this
Simple wrapper.
Add select2 js + css on index.html, write wrapper over select input
function renderOptions(option_items) {
if(option_items) {
return Object.entries(option_items).map(function (item) {
return
})
}
}
class Select2Input extends Component {
constructor(props) {
super(props)
this.ref_input = React.createRef()
}
/**
* Add select2 bind and send onChange manually
*/
componentDidMount() {
const self = this
$(self.ref_input.current).select2({
tags: true,
}).on('change', function(event) {
var value = $(event.currentTarget).val()
if(self.props.multiple === true) {
value = List(value)
}
self.props.onChange(self.props.name, value)
})
}
/**
* Emit change event for reload select2 if options has change
*/
componentDidUpdate(prevProps) {
if(prevProps.option_items !== this.props.option_items) {
$(this.ref_input.current).change()
}
}
render() {
return
}
}