web-dev-qa-db-ja.com

ReactjsでSelect2を使用する方法？

このような依存フィールドがあります

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

私が5を持っていた場合<List/>コンポーネント。各コンポーネントに Select2 を追加するにはどうすればよいですか。オンラインでググりましたが、有効な解決策が見つかりませんでした。

以下のreact-selectのコードの取得エラー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'));
javascriptreactjsselect2react-select
11
user3673959

this wrapper を使用していますが、問題が多すぎます。

最初に、 この問題 のため、NodeJSで使用されているコードをテストすることはできません。次に、defaultValueパラメータを介したさまざまなselect2コンポーネントの初期化に問題がありました。これらの要素の（ランダムに）1つだけが初期化されました。

したがって、それをダンプして、すぐにreact-selectに置き換えます。

編集：react-select2-wrapperをreact-selectに置き換えました。それは私たちにとって素晴らしい働きをします。

12
luboskrnac

Reactを使用しているので、jQueryプラグインよりもReactコンポーネントを探す方がよいでしょう。eaxmple react-select 、これはSelect2によく似ています。

8
mik01aj

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

これが「Reactの方法」だとは思いませんが、react-selectやその他のツールを使用したくない場合は、これが役立つことがあります。

8
aboutaaron

反応アプリケーションでjqueryとselect2だけを使用している場合は、Jqueryのcdnとselect2を "head"タグ内のpublic/index.htmlにリンクするだけです。次に、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を使用するため、jqueryを使用するにはwindow。$を使用する必要があります。 HTMLファイルでselect2を使用するのと同じことを実現します。

0
ThomasH.Allen

シンプルなラッパー。

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