如何在Reactjs中使用Select2？

Question

我有像这样的依赖字段

    <List>
     <select>
      <option></option>
      <option></option>
     </select>
     <select>
      <option></option>
      <option></option>
     </select>
     <input />
   </List>

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

react-select下面的代码。获取错误TypeError：event.target是未定义的 。

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'));

Answer 1

我们正在使用这个包装器 ，但它周围有太多问题。

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

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

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

Answer 2

既然你正在使用React，你最好不要寻找React组件而不是jQuery插件。 您可以使用eaxmple react-select ，这与Select2非常相似。

Answer 3

如果您正在使用refs [docs] ，则可以通过componentDidMount函数中的refs属性访问该节点，并将其传递给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>
    );
  }
});

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

Answer 4

如果你只是在一个react应用程序中使用jquery和select2，你只需链接cdn for Jquery和select2 in public / index.html里面的“head”标签。 然后在你的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); } 

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

Answer 5

简单的包装。

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

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>
    }
}