Dans le code ci-dessous, je ne suis pas en mesure d'utiliser ceci.SetState ({Nom: this.nameref.Current.value}). Quelqu'un peut-il s'il vous plaît dire pourquoi cela se produit? Une fois que j'ai quelque chose dans la valeur actuelle de Ref, pourquoi ne puis-je pas l'utiliser pour mettre à jour l'état actuel du composant? En outre, est-ce une mauvaise pratique? Cependant, peu importe si cela ne fonctionne pas.
class App extends React.Component {
constructor(){
console.log('constructor');
super();
this.state = {name : '', password: ''}
this.nameRef = React.createRef()
this.pwdRef = React.createRef()
}
handleLogin = (val) =>{
val.preventDefault();
this.setState({name: this.nameRef.current.value}) //Not working
alert("Welcome"+this.nameRef.current.value);
console.log(this.state.name); //Outputs empty string
}
render(){
return(
<React.Fragment>
<form>
<div className={"form-group"}>
<label>Username: </label>
<input style={{width: '60%', display: 'inline'}} name="name" type="text" className={"form-control"} placeholder="Enter name" ref={this.nameRef}/>
</div>
<div className={"form-group"}>
<label>Password: </label>
<input style={{width: '60%', display: 'inline'}} type="text" name="pass" className={"form-control"} placeholder="Enter password" ref={this.pwdRef}/>
</div>
<button type="submit" className={"btn btn-primary"} onClick={this.handleLogin}> Login </button>
</form>
</React.Fragment>
)
}
}
export default App;
3 Réponses :
Pas la meilleure pratique. Ajouter un de cette façon, chaque fois qu'un utilisateur est en entrée, qui met à jour automatiquement l'état. Les références doivent être utilisées avec parcimonie, car réagir a généralement de meilleurs moyens d'accomplir la plupart des choses. Onchange App à vos entrées, comme:
Avant de répondre à votre question, ce que vous devriez faire est de suivre la valeur de chaque entrée à la variable d'état correspondante. Vous pouvez le faire avec l'auditeur Onchange (vous obtenez la valeur via l'événement.Target.value)
Cependant, pour résoudre la question, ce que vous demandez est de savoir si vous pouvez utiliser des réfs pour obtenir la valeur d'un composant et l'utiliser. Vous pouvez, et vous devriez voir la valeur, ce que je pense que cela se passe est que l'entrée ne met pas à jour 'valeur' (que vous allez lorsque vous le contrôlez avec ONCHANGE et Value = {this.variablename}). Après avoir implémenté l'ONCHANGE et que vous essayez de connecter la valeur d'entrée en utilisant Réf, voir si elle change
Eh bien, je ne sais pas pourquoi ne puis-je pas définir l'état lorsque je clique sur Soumettre mais ONCHANGE () a résolu mon problème. Cela fonctionne simplement bien:
class App extends React.Component {
constructor(){
console.log('constructor');
super();
this.state={name: '',password: ''}
this.nameRef = React.createRef()
this.pwdRef = React.createRef()
}
setStat1 = () =>{
this.setState({name: this.nameRef.current.value})
}
setStat2 = () =>{
this.setState({password: this.pwdRef.current.value})
}
handleLogin = (val) =>{
console.log(this.state.name+" : "+this.state.password)
val.preventDefault();
alert("Welcome"+this.nameRef.current.value);
}
render(){
return(
<React.Fragment>
<form>
<div className={"form-group"}>
<label>Username: </label>
<input style={{width: '60%', display: 'inline'}} name="name" type="text" className={"form-control"} onChange={this.setStat1} placeholder="Enter name" ref={this.nameRef}/>
</div>
<div className={"form-group"}>
<label>Password: </label>
<input style={{width: '60%', display: 'inline'}} type="text" name="pass" className={"form-control"} placeholder="Enter password" onChange={this.setStat2} ref={this.pwdRef}/>
</div>
<button type="submit" className={"btn btn-primary"} onClick={this.handleLogin}> Login </button>
</form>
</React.Fragment>
)
}
}
Ce n'est pas une bonne solution. Imaginez que vous devez ajouter plus d'intrants. Vous auriez besoin de définir davantage de méthodes pour changer l'état. Ce que vous voulez faire est de définir une méthode et d'utiliser l'événement ou la valeur qui est passée pour définir l'état. Et pour l'ONCHANGE, envoyez l'ID du champ afin que vous sachiez quelle entrée a changé (dans l'entrée de l'utilisateur, vous envoyez «utilisateur», etc.)
C'est une bonne pratique pour ce site de sélectionner la bonne réponse au lieu de publier le vôtre, juste FYI.
Je sais, mais ce que je voulais vraiment, c'est comment je peux utiliser l'état pour définir une valeur de réforme actuelle. Je sais que ce code ne sera pas utile si vous deviez construire quelque chose de complexe et, évidemment, je n'irai pas avec cette approche non plus. C'était juste quelque chose de curiosité. Et parce que c'était quelque chose que j'espérais faire, j'ai trouvé un moyen de le faire. C'est pourquoi l'a posté comme une réponse.
Est-ce une mauvaise pratique? Oui. Pourquoi n'utilisez-vous pas la valeur et les accessoires d'ondhange?