发表新帖
发表新帖

How to use Select2 with Reactjs?

后端 未结
关注
5 1485
感动是毒
感动是毒 2021-02-19 10:13

I have dependent fields like this
提交评论
  •  加载中...
  • 囚心锁ツ
    2021-02-19 10:53

    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 with react-select. It works great for us.

    0 讨论(0)
  • 囚心锁ツ
    2021-02-19 10:59

    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 <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>
    }
}
    0 讨论(0)
  • 温柔的废话
    2021-02-19 11:00

    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.

    0 讨论(0)
  • 轻奢々
    2021-02-19 11:02

    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:

    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.

    0 讨论(0)
    •  看不清?
    提交回复
    热议问题