How does React work with jquery-ui?

How does React work with jquery-ui?

Hi. Everyone, I wanna make my select options can be draggable recently but failed. Why???
The first method:
1. I downloaded the jquery-ui@1.12.1 package from jqueryui.com site. Extracted.
2. Copy jquery.js into my src folder. And import resources in my jsx code : import './jquery.js'. It goes smoothly.
But In another method， It goes wrong:
1. Use npm tool to install jquery-ui@1.12.1: npm install jquery-ui@1.12.1
2. import it: import 'jquery-ui' or import 'jquery-ui/build/release.js'. It throws the error! 










And here is my Code:
  1. import React from 'react';
  2. import PropTypes from 'prop-types';
  3. import Select, { Creatable } from 'react-select';
  4. import 'react-select/dist/react-select.css';
  5. import $ from "jquery";
  6. import "jquery-ui/build/release.js";

  8. const propTypes = {
  9.   choices: PropTypes.array,
  10.   clearable: PropTypes.bool,
  11.   description: PropTypes.string,
  12.   freeForm: PropTypes.bool,
  13.   isLoading: PropTypes.bool,
  14.   label: PropTypes.string,
  15.   multi: PropTypes.bool,
  16.   name: PropTypes.string.isRequired,
  17.   onChange: PropTypes.func,
  18.   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
  19.   showHeader: PropTypes.bool,
  20. };

  22. const defaultProps = {
  23.   choices: [],
  24.   clearable: true,
  25.   description: null,
  26.   freeForm: false,
  27.   isLoading: false,
  28.   label: null,
  29.   multi: false,
  30.   onChange: () => {},
  31.   showHeader: true,
  32. };

  34. export default class MulSelect extends React.Component{
  35.   constructor(props) {
  36.     super(props);
  37.     this.state = { options: this.getOptions(props) };
  38.     this.onChange = this.onChange.bind(this);
  39.   }
  40.   componentWillReceiveProps(nextProps) {
  41.     if (nextProps.choices !== this.props.choices) {
  42.       const options = this.getOptions(nextProps);
  43.       this.setState({ options });
  44.     }
  45.   }
  46.   onChange(opt) {
  47.     let optionValue = opt ? opt.value : null;
  48.     // if multi, return options values as an array
  49.     if (this.props.multi) {
  50.       optionValue = opt ? opt.map(o => o.value) : null;
  51.     }
  52.     this.props.onChange(optionValue);
  53.   }
  54.   getOptions(props) {
  55.     // Accepts different formats of input
  56.     const options = props.choices.map((c) => {
  57.       let option;
  58.       if (Array.isArray(c)) {
  59.         const label = c.length > 1 ? c[1] : c[0];
  60.         option = {
  61.           value: c[0],
  62.           label,
  63.         };
  64.       } else if (Object.is(c)) {
  65.         option = c;
  66.       } else {
  67.         option = {
  68.           value: c,
  69.           label: c,
  70.         };
  71.       }
  72.       return option;
  73.     });
  74.     if (props.freeForm) {
  75.       // For FreeFormSelect, insert value into options if not exist
  76.       const values = options.map(c => c.value);
  77.       if (props.value) {
  78.         let valuesToAdd = props.value;
  79.         if (!Array.isArray(valuesToAdd)) {
  80.           valuesToAdd = [valuesToAdd];
  81.         }
  82.         valuesToAdd.forEach((v) => {
  83.           if (values.indexOf(v) < 0) {
  84.             options.push({ value: v, label: v });
  85.           }
  86.         });
  87.       }
  88.     }
  89.     return options;
  90.   }

  92.   componentDidMount(props){
  93.     $("#react-select-2--value").sortable({
  94.       stop: (event, ui)=>{
  95.         //拖拽完成，同步hidden的input框
  96.         var inputs = $("#react-select-2--container").children("input");
  97.         var father = $("#react-select-2--value");
  98.         var childs = father.find(".Select-value").children(".Select-value-label").clone();
  99.         childs.find(':nth-child(n)').remove();
  100.         var val = [];
  101.         for(let i =0;i<childs.length;i++){
  102.           val.push(childs[i].innerText);
  103.           inputs[i].value = childs[i].innerText;
  104.         }
  105.         this.props.onChange(val);
  106.       }
  107.     });
  108.   }

  110.   render() {
  111.     //  Tab, comma or Enter will trigger a new option created for FreeFormSelect
  112.     const selectProps = {
  113.       multi: this.props.multi,
  114.       name: `select-${this.props.name}`,
  115.       placeholder: `Select (${this.state.options.length})`,
  116.       options: this.state.options,
  117.       value: this.props.value,
  118.       autosize: false,
  119.       clearable: this.props.clearable,
  120.       isLoading: this.props.isLoading,
  121.       onChange: this.onChange,
  122.       optionRenderer: opt => opt.label,
  123.     };
  124.     //  Tab, comma or Enter will trigger a new option created for FreeFormSelect
  125.     const selectWrap = this.props.freeForm ?
  126.       (<Creatable {...selectProps} />) : (<Select {...selectProps} />);
  127.     return (
  128.       <div>
  129.         <form action="when" method="GET">
  130.           {selectWrap}
  131.           <input type="submit" />
  132.         </form>
  133.       </div>
  134.     );
  135.   }
  136. }

  138. MulSelect.propTypes = propTypes;
  139. MulSelect.defaultProps = defaultProps;