J'ai un menu déroulant Material UI. Je ferai une recherche plus tard sur la base de l'option sélectionnée dans le menu déroulant. Comment pourrais-je utiliser exactement onChange () pour stocker l'option sélectionnée?
Pour l'instant, j'essaye d'imprimer la valeur stockée (critères) en utilisant la typographie à la fin mais au lieu d'afficher la valeur sélectionnée, j'obtiens une page noire.
export default class userSearchPage extends Component<{}, { searchItem: string, criteria: any}>{
constructor(props: Readonly<{}>) {
super(props);
this.state = {
searchItem: '',
criteria: null,
};
this.handleDropDownChange = this.handleDropDownChange.bind(this);
}
handleDropDownChange(event: any) {
console.log(event.target.value);
this.setState({
criteria: event.target.value
});
}
render() {
return (
<div>
<PermanentDrawerLeft></PermanentDrawerLeft>
<div className='main-content'>
<InputLabel id="demo-simple-select-label">Search By</InputLabel>
<Select
value={this.state.criteria}
onChange={this.handleDropDownChange}
displayEmpty
>
<MenuItem disabled value=" ">
<em>Search By</em>
</MenuItem>
<MenuItem value={1}>First Name</MenuItem>
<MenuItem value={2}>Last Name</MenuItem>
<MenuItem value={3}>Phone Number</MenuItem>
<MenuItem value={4}>Email</MenuItem>
</Select>
</div>
</div>
);
}
}
Comment pourrais-je résoudre ce problème? p>
Remarque: Ceci est dactylographié
Ajouté
export default class userSearchPage extends Component<{}, { searchItem: string, criteria: string }>{
constructor(props: Readonly<{}>) {
super(props);
this.state = {
searchItem: '',
criteria: '',
};
this.handleDropDownChange = this.handleDropDownChange.bind(this);
}
handleDropDownChange(selected: any) {
this.setState({
criteria: selected
});
}
render() {
return (
<div>
<PermanentDrawerLeft></PermanentDrawerLeft>
<div className='main-content'>
<MuiThemeProvider>
<DropDownMenu onChange = {this.handleDropDownChange}>
<MenuItem style={{ fontSize: "20px" }} primaryText="Search By" />
<MenuItem value={1} style={{ fontSize: "20px" }} primaryText="First Name" />
<MenuItem value={2} style={{ fontSize: "20px" }} primaryText="Last Name" />
<MenuItem value={3} style={{ fontSize: "20px" }} primaryText="Phone Number" />
<MenuItem value={4} style={{ fontSize: "20px" }} primaryText="Email" />
</DropDownMenu>
</MuiThemeProvider>
<Typography>{this.state.criteria}</Typography>
<br></br><br></br>
<SearchBar
onChange={e => this.setState({ searchItem: e })}
value = {this.state.searchItem}
onRequestSearch={() => console.log('onRequestSearch')}
style={{
margin: '0 auto',
maxWidth: 800
}}
/>
<Typography>{this.state.criteria}</Typography>
</div>
</div>
);
}
}
3 Réponses :
Le menu DropDownMenu doit avoir l'événement 'onChange' qui reçoit l'option sélectionnée comme argument, que vous pouvez stocker dans l'état des composants
Salut, je connais onChange en général, mais je ne sais pas comment l'utiliser ici. Pourriez-vous voir ma question modifiée?
Je ne connais pas l'API exacte de MaterialUI, mais cela devrait être quelque chose comme ça jsfiddle.net/fesu9nht
Bonjour, j'utilise votre méthode suggérée. Il se compile sans erreur mais me donne une page vierge lorsque je sélectionne une option. Pouvez-vous voir le code mis à jour dans mes questions?
Vous pouvez utiliser l'événement onChange pour faire quelque chose lorsque l'utilisateur sélectionne une option. Si vous voulez des informations, vous pouvez consulter cet article: https://www.w3schools.com/ jsref / event_onchange.asp
Salut, je connais onChange en général, mais je ne sais pas comment l'utiliser ici. Pourriez-vous voir ma question modifiée?
En supposant que le composant DropDownMenu est juste un composant Material-UI Select ( https: // material -ui.com/components/selects/#select ), vous devez mettre à jour l'état de votre searchItem à la valeur de l'élément de menu sélectionné.
<DropDownMenu onChange={event => {this.setState({searchItem: event.target.value})}>
Remarque, actuellement dans votre exemple le prénom et le nom de l'élément utilisent la même valeur de 1.
Mise à jour - ajout du commentaire contenant le code de la solution:
Voici exemple utilisant le composant Select de Material-UI au lieu de DropDownMenu: https://codesandbox.io/s/eager -hugle-tlfri
Cela me donne une erreur indiquant que la propriété 'valeur' n'existe pas sur le type 'EventTarget'. TS2339
Hmm .. un onChange devrait avoir accès à l'événement sauf si votre DropDownMenu ne le prend pas en charge. Je ne vois pas de composant DropDownMenu dans la documentation de l'API Material-UI. Pouvez-vous me montrer le code du composant DropDownMenu ou le lien vers les documents correspondants? Quelle version de Material-UI utilisez-vous?
Voici un exemple d'utilisation du composant Select de Material-UI au lieu de DropDownMenu: codesandbox.io/s/eager-hugle -tlfri
Salut, cela fonctionne! Il n'y a qu'un seul problème. Lorsque rien n'est sélectionné, mon écran n'affiche qu'une flèche et aucun texte (Rechercher par). Contrairement au vôtre, mon texte Recherche par n'est visible que lorsque je clique sur la flèche. Pouvez-vous voir mon code mis à jour et ce qu'il me manque?
À première vue, c'est parce que la valeur MenuItem que vous avez définie pour le texte Rechercher par contient un espace. Laissez un devis vide.
Non, ce n'est pas le problème. J'ai ajouté l'espace pour tenter de le réparer mais cela ne sert à rien
Les critères de votre état sont-ils définis comme une chaîne vide ou null? Dans mon exemple, j'ai des critères définis comme une chaîne vide.
J'ai essayé aussi avec une chaîne vide mais c'est toujours pareil
Je viens de copier votre code dans le code et la boîte. Avez-vous remarqué l'erreur dans la console? Attention: le prop `value` sur` input` ne doit pas être nul Pensez à utiliser une chaîne vide pour effacer le composant ou «indéfini» pour les composants non contrôlés. Cela signifie que vous devez utiliser une chaîne vide pour les critères dans l'état. Vous devez également utiliser une chaîne vide pour la valeur MenuItem. Faire ces deux choses fonctionne exactement comme mon exemple. Vérifiez à nouveau votre console pour toute autre erreur / avertissement. Le codeandbox a maintenant votre code copié avec mes modifications et cela fonctionne.
Je ne comprends pas vraiment pourquoi cette question est votée comme c'est assez simple et la réponse est: garder une trace des options sélectionnées dans votre état
@YevgenGorbunkov Salut, je connais onChange en général, mais je ne sais pas comment l'utiliser ici. Pourriez-vous voir ma question modifiée?