Comment prendre les entrées de <Input/> dans React interface sémantique

Question

J'ai essayé de prendre les entrées d'un champ input et je l'ai utilisé refs (la manière habituelle en react), mais il ne semble pas fonctionner. Le input que j'obtiens est undefined. Ceci est mon code:

sendMessage =() => { 
    console.log(this.inputtext.value); 
} 

render(){ 
    return(
     <div> 
     <Input ref={input => this.inputtext = input;} placeholder='message'/> 
     <Button onClick={this.sendMessage}>Send</Button> 
     </div> 
    ); 
} 

Je dois prendre les entrées de la click event du bouton. Je ne peux pas comprendre ce qui ne va pas. Comment puis-je obtenir la valeur input correctement?

Answer 1

Puisque vous avez utilisé l'opérateur arrow, this.inputtext.value ne fonctionnera pas, vous devez écrire:

sendMessage(){ 
    console.log(this.inputtext.value); 
} 

dans le composant Input de ce cas sémantique est un ui div enveloppé sur le dessus input. Vous ne pouvez donc pas accéder à l'élément d'entrée directement via ref. Vous devez utiliser la manière préférée de réagir pour obtenir la valeur, qui est

<Input onChange={this.handleMessage.bind(this)} placeholder='message'/> 

et

handleMessage (e) { console.log(e.target.value); /* store value here. */ } 

Answer 2

Vous devez utiliser une méthode de classe normale pour que cela fonctionne. Vous ne devriez pas avoir de point-virgule dans la référence.

sendMessage() { 
    console.log(this.inputtext.value); 
    } 

    render(){ 
    return(
     <div> 
     <Input ref={input => this.inputtext = input} placeholder='message'/> 
     <Button onClick={this.sendMessage}>Send</Button> 
     </div> 
    ); 
    } 

Answer 3

Dans votre cas, vous pouvez également obtenir la valeur d'entrée par ce code:

this.inputtext.inputRef.value