Je suis nouveau dans react . J'utilise react select pour sélectionner.
Maintenant, j'ai le jsx
['a', 'b', 'c']
suivant, cela vient du réducteur comme accessoire. Maintenant, les données que j'obtiens sont comme,
div className="col-md-4 d-flex align-items-center" style={borderClass}>
<label className="mb-0 font-weight-bold" style={labelFont}>
Technology
</label>
<Select
styles={styles}
options={this.props.technology}
placeholder="None Selected"
/>
</div>
const mapStateToProps = (state) => {
return {
technology : state.CreateJob.technology,
userCompany: state.CreateJob.userCompany
}
}
Alors, comment puis-je utiliser cela comme option dans le rendu. Est-ce que quelqu'un peut m'aider avec ça ? Merci.
6 Réponses :
vous devez utiliser map pour parcourir le tableau et afficher une option pour
rendre chaque élément du tableau.
<select className="form-control" value={currentValue} onChange={onChange}>
<option value="">
Select one...
</option>
{array.map(text,i => (
<option key={i} value={text}>
{text}
</option>
))}
</select>
Vous pouvez afficher une liste comme celle-ci:
<Select options={ technologyList } />
Et l'utiliser:
var array1 = ['a', 'b', 'c'];
var technologyList = [];
array1.forEach(function(element) {
technologyList.push({ label:element, value: element })
});
Que faire si j'ai une seule valeur de chaîne comme "abcd" et que je veux qu'elle soit sélectionnée automatiquement avec cette valeur
Vous trouverez ce dont vous avez besoin dans ce lien: appdividend.com / 2018/10/19 /…
React select expect options props comme tableau d'objets avec valeur de propriété et étiquette
<Select
styles={styles}
options={this.props.technology.map(t=>({value: t, label: t}))}
placeholder="None Selected"
/>
J'ai utilisé ce sol. mais il a 2200 articles. alors cette chose est pendue
Si j'ai une seule chaîne et que je veux qu'elle soit sélectionnée automatiquement, quelle est la façon de faire ut
Salut @aseferov pourriez-vous s'il vous plaît regarder stackoverflow.com/questions/55057517/...
Vous devez re-mapper votre tableau de chaînes à un tableau d'objets, react-select accepter ce format pour les options prop.
[{value: "votre valeur", libellé: "votre libellé"}]
Consultez la documentation officielle ici !
React-Select attend un tableau d'objets pour les options avec ce format:
...
render(){
const { technology } = this.props;
const rsOptions = technology.map(x => {label: x, value: x});
return (
<div className="col-md-4 d-flex align-items-center" style={borderClass}>
<label className="mb-0 font-weight-bold" style={labelFont}>Technology</label>
<Select
styles={styles}
options={rsOptions}
defaultValue={{label: 'abcd', value: 'abcd'}}
// value={{label: 'abcd', value: 'abcd'}} // use value instead of defaultValue if its an controlled input
// you can also use an object from your array by index
// defaultValue={rsOptions[0]}
// or you can use find in your array
// defaultValue={rsOptions.find(x => x.value === 'abcd)}
placeholder="None Selected"
/>
</div>
);
}
...
La propriété label est affichée à l'utilisateur et la valeur sera envoyée au serveur lors de l'envoi du formulaire. p >
Vous devez donc créer un tableau au format donné à partir du tableau reçu du magasin redux.
[..., { value: 'optionValue', label: 'optionLabel' }, ...]
pouvez-vous regarder stackoverflow.com/questions/55057517/...
<Select
options={options}
getOptionLabel={option => option}
getOptionValue={option => option}
/>