web-dev-qa-db-fra.com

Comment utiliser Select2 avec Reactjs?

J'ai des champs dépendants comme celui-ci

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

Si j'avais 5 composants <List/>.Comment puis-je ajouter Sélectionner2 à chaque composant.J’ai cherché sur Google en ligne.Mais je n’ai trouvé aucune solution qui fonctionne.

Code ci-dessous pour réaction-sélection. Obtention de l'erreur TypeError: event.target n'est pas défini.

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
9
user3673959

Nous utilisons ce wrapper , mais il y a trop de problèmes autour de lui.

Tout d'abord, vous ne pouvez pas tester le code utilisé dans NodeJS en raison de ce problème . Deuxièmement, nous avons rencontré des problèmes d'initialisation de divers composants select2 via le paramètre defaultValue. Un seul (au hasard) de ces éléments a été initalisé.

Par conséquent, nous allons le vider et le remplacer bientôt par react-select.

EDIT: Nous avons remplacé react-select2-wrapper par react-select. Cela fonctionne très bien pour nous.

11
luboskrnac

Puisque vous utilisez React, vous feriez mieux de rechercher des composants React plutôt que des plugins jQuery. Vous pouvez utiliser eaxmple react-select , qui est assez similaire à Select2.

7
mik01aj

Si vous utilisez refs[docs] , vous pouvez accéder au nœud via son attribut refs dans la fonction componentDidMount et le transmettre à 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>
    );
  }
});

Je ne crois pas que ce soit la "manière de réagir", mais cela peut aider si vous ne voulez pas utiliser react-select ou un autre outil. 

6
aboutaaron

Si vous utilisez simplement jquery et select2 dans une application de réaction, vous pouvez simplement lier le cdn pour Jquery et select2 dans public/index.html à l'intérieur de la balise "head" . Puis dans votre src/components/composant.js. Vous pouvez utiliser jquery select2 comme ceci:

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

Comme vous utilisez les cdns du fichier public/.html, vous devez utiliser window. $ Pour utiliser jquery. Cela équivaut à utiliser select2 dans un fichier html.

0
ThomasH.Allen