Réagir Sélectionnez auto, largeur

SOLUTION 1

Vous pouvez tirer parti de Réagir de inline styles en mettant à jour les composants width en fonction de la durée de l'option sélectionnée.

Laissez-moi vous expliquer plus loin: Dire la valeur sélectionnée est HelloWorld. Cette chaîne est de longueur 10. Nous pourrions supposer que chaque caractère comptes pour dire 8px chacun en moyenne (total suppose que je n'ai aucune idée). Ainsi, la largeur de ce mot est autour de 8*10=80px, droit ? Aussi, il y a quelques contrôles après le mot (la carret et la croix) et nous avons besoin d'un minimum de rembourrage: ensemble, ils peuvent être de 100px largeur. Alors là vous l'avez: votre div de largeur doit être ( 8px * 10 letters ) + 100px = 180px.

Plus précisément, la formule correcte est quelque chose comme:

(average_letter_size * selected_value.length) + other_elements_sizes

Quand selected_value des modifications de ses length, et par conséquent la largeur de la div est mis à jour avec le nouveau total.

Exemple: si la valeur sélectionnée est maintenant Lorem Ipsum dolor sit amet, la longueur est maintenant 26. En appliquant la formule, nous obtenons une plus grande largeur de : (8px * 26 letters) + 100px = 308px.

Pour que cela fonctionne à réagir, voici un extrait:

<Select
  style={{width: `${(8*this.state.selectedOption2.length) + 100}px`}}            
  className="select-custom-class"
  name="form-field-name"
  value={this.state.selectedOption2}
  options={options2}
  onChange={(value) => { this.setState({ selectedOption2: value.value }); }}
 />

Comme vous pouvez le voir, j'ai ajouté :

style={{width: `${(8*this.state.selectedOption2.length) + 100}px`}}

à votre composant. Chaque fois que l'état est mise à jour, tout est multiplié, y compris la largeur de l'élément.

Voir un exemple dans ce violon.

Par la suite, vous souhaitez affiner les règles et les moyennes à vos besoins. Je vous conseille aussi d'appliquer une lettre de la taille en fonction du nombre de lettres majuscules et minuscules dans la valeur sélectionnée.

SOLUTION 2 (edit)

Je suis venu avec un pur CSS solution si vous le souhaitez. Il devrait être mieux testé contre votre conception, mais cela devrait fonctionner:

//.Select-value comes with an absolute position to stack it below .Select-input
//we need to scratch that in order for us to be able to let the div grow depending on its content size
.Select-placeholder, .Select--single > .Select-control .Select-value {
  position: relative;
  padding-left: 0;
}

//All these 3 classes come with ugly "table" display...
.Select-control, .Select-clear-zone, .Select-arrow-zone {
  display: inherit;
}

//here is the trick: we display the wrapper as flex in order to make it fit in height
//we flip positions of .Select-value and .Select-input using row-reverse in order to have a nice input to the left and no to the right
.select-custom-class .Select-multi-value-wrapper {
  display: flex;
  flex-direction: row-reverse;
}

//we put our controls back to a better center position
.Select-clear-zone {
  position: absolute;
  top: 8px;
  right: 20px;
}

.Select-arrow-zone {
  position: absolute;
  top: 8px;
  right: 0px;
}

Voir un violon (j'ai changé quelques exemples pour mieux illustrer)

Dites-moi ce que vous en pensez. 🙂