J'essaie de mettre à jour la valeur de l'état. Par exemple, si l'utilisateur sélectionne la 3e option dans select, je souhaite mettre à jour une valeur d'état. J'ai essayé, mais la valeur de l'état ne change pas. Quelqu'un pourrait-il m'aider à résoudre ce problème. Merci
Code
class Calendar extends Component {
constructor(){
super();
this.state={
isCustomer:false
}
}
render(){
return(
<select>
<option value="1">1</option>
<option value="2">1</option>
<option value="3" onChange={this.setState({isCustomer:true})}>1</option>
</select>
)}
export default Calendar
4 Réponses :
Vous devez utiliser l'événement onChange sur la balise select et non sur la balise option.
Ensuite, appliquez une logique supplémentaire à votre gestionnaire d'événements pour vérifier si l'option souhaitée a été sélectionnée. p>
Voici le bac à sable fonctionnel: https://codesandbox.io/s/peaceful -sound-v0stt
onChangeHandler = e => {
if (e.target.value == 3) {
this.setState(
{
isCustomer: true
},
() => alert("It is working")
);
}
};
Pour votre problème spécifique avec l'alerte (). Déclenchez simplement l'alerte dans la fonction de rappel comme ceci:
import React, { Component } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
class Calendar extends Component {
constructor() {
super();
this.state = {
isCustomer: false
};
}
handleOnChange = e => {
if (e.target.value == 3) {
this.setState({ isCustomer: true });
}
};
render() {
console.log(this.state.isCustomer);
return (
<div>
<select onChange={this.handleOnChange}>
<option value="1">1</option>
<option value="2">1</option>
<option value="3">1</option>
</select>
{this.state.isCustomer ? <input placeholder="name" /> : ""}
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<Calendar />, rootElement);
Merci pour votre réponse, une dernière chose. Je veux masquer et afficher le champ de saisie. Par exemple, par défaut, je veux masquer le champ lorsque l'utilisateur sélectionne l'option 3 Je veux l'afficher
Bien sûr, vous pouvez utiliser un opérateur ternaire pour vérifier la valeur d'état mise à jour. Voir la réponse mise à jour. @Jonas
Vous pouvez également utiliser un if en ligne pour l'afficher, comme indiqué dans la réponse ci-dessus
Pouvez-vous mettre à jour votre code ci-dessus avec ce que vous avez essayé :) @Jonas
@Jonas J'ai mis à jour ma solution pour savoir comment utiliser correctement alert () .
Vous pouvez y parvenir en utilisant l'événement onChange dans select (et non l'option). Vous pouvez ensuite vérifier si la valeur sélectionnée est la troisième.
Exemple de travail:
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id='root'>
class Calendar extends React.Component {
state = {
isCustomer: false
}
onChange = ev => {
this.setState(
{isCustomer:ev.target.value === "3"},
() => { console.log(this.state.isCustomer)
})
}
render(){
return(
<div>
<select onChange={this.onChange}>
<option value="1">1</option>
<option value="2">54</option>
<option value="3">Customer</option>
</select>
{this.state.isCustomer && <input defaultValue="Hi customer :)"></input>}
</div>
)
}
}
ReactDOM.render(<Calendar/>, document.getElementById('root'))
Félicitations pour l'effort de l'extrait.
Haha merci. Cela fait un moment que je n'ai pas fait l'une de celles-ci, j'ai dû trouver des réponses plus anciennes pour que cela fonctionne d'une manière ou d'une autre
@Treycos, pouvez-vous s'il vous plaît afficher et masquer l'entrée en fonction de la condition
Le ... se sélectionner? Par exemple, si «client» est sélectionné, la totalité de la teinte disparaît?
Non, en fait, je veux que lorsque l'utilisateur sélectionne l'option 3, je veux afficher l'entrée. Si l'utilisateur sélectionne une autre option, je souhaite masquer une entrée
Remplacez simplement le nœud
Eh bien, l'extrait fonctionne bien avec lui ... Vous avez peut-être fait quelque chose de mal, je ne peux pas savoir ce que c'est
Pourriez-vous modifier votre question avec les informations supplémentaires? (code, erreur)
En fait, Alert ne s'affiche pas. Lorsque je console dans le navigateur, les valeurs isCustomer sont vraies mais l’alerte ne s’affiche pas
Si vous souhaitez simplement afficher une alerte, vous pouvez mettre l'appel dans la condition de la fonction onChange au lieu du JSX
En fait, je donne juste un exemple d'alerte. Je veux montrer l'entrée mais ça ne fonctionne pas
Copiez et collez simplement la ligne ci-dessus: {this.state.isCustomer && } C'est un if en ligne
en fait, je travaille sur React-popup donc sous forme, les valeurs mises à jour ne viennent pas lorsque je rafraîchis la page, puis les valeurs mises à jour sont arrivées. Je souhaite restituer le contenu d'un formulaire lorsque l'état est mis à jour
Vous appelez la fonction directement lors du changement, cela conduira à un état infini, ce que vous pouvez faire est:
class Calendar extends Component {
constructor(){
super();
this.state={
isCustomer:false
}
}
handleChange = (e) => {
console.log(e.target.value)
if(e.target.value==="3"){
this.setState({isCustomer:true})
}
}
render(){
console.log(this.state);
return(
<select onChange={this.handleChange}>
<option value="1">1</option>
<option value="2">1</option>
<option value="3" >1</option>
</select>
)
}
}
export default Calendar
Démo de code: https://stackblitz.com/edit/react-dxheff
pourriez-vous s'il vous plaît afficher et masquer l'entrée en fonction de la condition
@Jonas qu'avez-vous essayé jusqu'à présent pour afficher / masquer l'entrée?
D'abord, vous ne pouvez pas intégrer l'événement sur l'option, vous devez donc lier l'événement onChange sur le ragn sélectionné Deuxièmement, vous devez passer une fonction à l'intérieur de votre événement et non des instructions directes.
Je ne sais pas exactement ce que vous voulez réaliser mais l'extrait ci-dessus peut vous aider, il définit uniquement l'état isCustomer à la valeur d'option 3
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.5.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.5.0/umd/react-dom.production.min.js"></script> <div id="calendar"></div> <pre id="state"></pre>
class Calendar extends React.Component {
constructor(props) {
super(props);
this.state = {
isCustomer: false
}
}
selectChange = (evt) => {
let val = evt.target.value;
this.setState({
isCustomer: val === "3"
}, () => {
document.getElementById("state").innerHTML ="state is :" + JSON.stringify(this.state);
})
}
render() {
return (
<select onChange ={ (e) => this.selectChange(e) } >
<option value = "1" > 1 < /option>
<option value = "2" > 2 < /option>
<option value = "3"
> 3 < /option>
</select>
)
}
}
ReactDOM.render( < Calendar / > , document.getElementById("calendar"));
Salut Jonas, essayez ma solution ci-dessous et faites-moi savoir que cela aide :)