Javascript 如何在 Reactjs 中使用 Select2？

How to use Select2 with Reactjs?

提问by luboskrnac

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 Select2to each component.I googled online.But couldn't find any working solution.

如果我有 5 个<List/>组件。如何将Select2添加到每个组件中。我在网上搜索。但找不到任何可行的解决方案。

Code below for react-select.Getting error TypeError: event.target is undefined.

以下代码用于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'));

回答by luboskrnac

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 defaultValueparameter. Only one (randomly) of these elements was initalized.

首先，由于这个问题，您无法在 NodeJS 中使用它的地方测试代码。其次，我们在通过defaultValue参数初始化各种 select2 组件时遇到了问题。这些元素中只有一个（随机）被初始化。

Therefore we going to dump it and replace with react-selectsoon.

因此，我们将转储它并react-select尽快替换。

EDIT: We replaced react-select2-wrapperwith react-select. It works great for us.

编辑：我们替换react-select2-wrapper为react-select. 它对我们很有用。

回答by aboutaaron

If you're using refs[docs], you can access the node via its refsattribute in the componentDidMountfunction and pass that to select2():

如果您使用refs[docs]，则可以通过其refs在componentDidMount函数中的属性访问该节点并将其传递给select2()：

var Select = React.createClass({
  handleChange: function () {
    this.prop.onChange(
      this.refs.myRef.value
    );
  },

  componentDidMount: function () {
    // Call select2 on your node
    var self = this;
    var node = this.refs.myRef; // or this.refs['myRef']
    $(node)
      .select2({...})
      .on('change', function() {
        // this ensures the change via select2 triggers 
        // the state change for your component 
        self.handleChange();
      });
  },

  render: function () {
    return (
      <select 
        ref="myRef"
        onChange={this.handleChange}>
        // {options}
      </select>
    );
  }
});

I don't believe this is the "React way," but this may help if you don't want to use react-selector some other tool.

我不相信这是“反应方式”，但如果您不想使用react-select或其他工具，这可能会有所帮助。

回答by mik01aj

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.

由于您使用的是 React，因此最好寻找 React 组件而不是 jQuery 插件。您可以使用 for eaxmple react-select，它与 Select2 非常相似。

回答by ThomasH.Allen

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:

如果您只是在 React 应用程序中使用 jquery 和 select2，您可以简单地在“head”标签内的 public/index.html 中链接 Jquery 和 select2 的 CDN。然后在你的 src/components/component.js 中。您可以像这样使用 jquery select2：

constructor(props) {
        super(props);
        this.state = {
            Provinces: [],
        };
        this.select2PX = this.select2PX.bind(this);
        // this.ApiTest = this.ApiTest.bind(this);
}

select2PX(){
        window.$(document).ready(function() {
            window.$('#phuong-xa').select2();
        });
}

componentDidMount(){
  this.select2PX();
}


render(){
   return (.... html);
}

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.

因为你使用的是public/.html文件中的cdns，所以需要使用window.$才能使用jquery。它实现了与在 html 文件中使用 select2 相同的事情。

回答by dibrovsd

Simple wrapper.

简单的包装。

Add select2 js + css on index.html, write wrapper over select input

在 index.html 上添加 select2 js + css，在选择输入上编写包装器

function renderOptions(option_items) {
    if(option_items) {
        return Object.entries(option_items).map(function (item) {
            return <option key={item[0]} value={item[0]}>{item[1]}</option>
        })
    }
}

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 <select className="form-control"
                    multiple={this.props.multiple}
                    name={this.props.name}
                    value={this.props.value}
                    disabled={this.props.disabled}
                    ref={this.ref_input}>
                            {renderOptions(this.props.option_items)}
            </select>
    }
}