Je suis totalement nouveau pour réagir alors il me manque probablement quelque chose d'élémental. L'exemple de code du site react-bootstrap React-Bootstrap montre les éléments suivants. Je dois piloter les options en utilisant un tableau, mais j'ai du mal à trouver des exemples pour les compiler.
<Input type="select" label="Multiple Select" multiple>
<option value="select">select (multiple)</option>
<option value="other">...</option>
</Input>
Vous pouvez commencer avec ces deux fonctions. Le premier créera vos options de sélection de manière dynamique en fonction des accessoires transmis à la page. S'ils sont mappés sur l'état, la sélection se recréera.
createSelectItems() {
let items = [];
for (let i = 0; i <= this.props.maxValue; i++) {
items.Push(<option key={i} value={i}>{i}</option>);
//here I will be creating my options dynamically based on
//what props are currently passed to the parent component
}
return items;
}
onDropdownSelected(e) {
console.log("THE VAL", e.target.value);
//here you will see the current selected value of the select input
}
Ensuite, vous aurez ce bloc de code dans le rendu. Vous passerez une référence de fonction à la propriété onChange et à chaque fois que onChange sera appelé, l'objet sélectionné sera automatiquement lié à cette fonction. Et au lieu d'écrire manuellement vos options, vous appellerez simplement la fonction createSelectItems (), qui construira et retournera vos options en fonction de certaines contraintes (qui peuvent changer).
<Input type="select" onChange={this.onDropdownSelected} label="Multiple Select" multiple>
{this.createSelectItems()}
</Input>
Mon exemple de travail
this.countryData = [
{ value: 'USA', name: 'USA' },
{ value: 'CANADA', name: 'CANADA' }
];
<select name="country" value={this.state.data.country}>
{this.countryData.map((e, key) => {
return <option key={key} value={e.value}>{e.name}</option>;
})}
</select>
Une doublure serait:
import * as YourTypes from 'Constants/YourTypes';
....
<Input ...>
{Object.keys(YourTypes).map((t,i) => <option key={i} value={t}>{t}</option>)}
</Input>
En supposant que vous stockiez les constantes de la liste dans un fichier séparé (et vous devriez le faire, à moins qu'elles ne soient téléchargées depuis un service Web):
# YourTypes.js
export const MY_TYPE_1="My Type 1"
....
Vous devez ajouter une clé pour le mappage, sinon un avertissement est émis car chaque accessoire doit avoir une clé unique. Code révisé ci-dessous: let optionTemplate = this.state.values.map ((v, index) => ({v.name}));
Vous pouvez créer des options de sélection dynamiques par map ()
Exemple de code
return (
<select className="form-control"
value={this.state.value}
onChange={event => this.setState({selectedMsgTemplate: event.target.value})}>
{
templates.map(msgTemplate => {
return (
<option key={msgTemplate.id} value={msgTemplate.text}>
Select one...
</option>
)
})
}
</select>
)
</label>
);
lier la chute dynamique en utilisant la fonction flèche.
class BindDropDown extends React.Component {
constructor(props) {
super(props);
this.state = {
values: [
{ name: 'One', id: 1 },
{ name: 'Two', id: 2 },
{ name: 'Three', id: 3 },
{ name: 'four', id: 4 }
]
};
}
render() {
let optionTemplate = this.state.values.map(v => (
<option value={v.id}>{v.name}</option>
));
return (
<label>
Pick your favorite Number:
<select value={this.state.value} onChange={this.handleChange}>
{optionTemplate}
</select>
</label>
);
}
}
ReactDOM.render(
<BindDropDown />,
document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root">
<!-- This element's contents will be replaced with your component. -->
</div>