Wie zu nehmen Eingaben von <Input/> in semantische UI reagieren

Question

Ich habe versucht, Eingaben von einem input Feld zu nehmen und ich benutzen refs (die übliche Art und Weise in react), aber es scheint nicht zu funktionieren. Die input ich bekomme ist undefined. Dies ist mein 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> 
    ); 
} 

ich die Eingänge von den click event der Taste nehmen müssen. Ich kann nicht herausfinden, was falsch ist. Wie kann ich den input Wert richtig erhalten?

Answer 1

Da Sie den arrow Operator verwendet haben, this.inputtext.value wird nicht funktionieren, Sie schreiben müssen:

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

In diesem Fall semantisch-ui der Input Komponente a div oben auf input gewickelt ist. Sie können also nicht direkt über ref auf Eingabeelement zugreifen. Sie sollten die bevorzugte Art und Weise des reagieren, um den Wert zu erhalten, die

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

und

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

Answer 2

Sie benötigen eine normale Klassenmethode für diesen Einsatz zu arbeiten. Sie sollten auch kein Semikolon in der Referenz haben.

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

In Ihrem Fall können Sie auch den Eingangswert durch diesen Code erhalten:

this.inputtext.inputRef.value