反応セマンティックUIで<Input/>から入力を取る方法

Question

inputフィールドから入力を取得しようとしていて、refs（通常の方法でreact）を使用しましたが、動作していないようです。私が得ているinputはundefinedです。私は、ボタンのclick eventからの入力を取る必要があり

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

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

：これは私のコードです。私は何が間違っているのか理解できません。 inputの値を正しく取得するにはどうすればよいですか？

Answer 1

あなたがarrow演算子を使用しておりますので、this.inputtext.valueはあなたが書く必要が 、動作しません。

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

この場合、セマンティック-UIのInputコンポーネントがinputの上に包まdivです。したがって、refを介して入力要素に直接アクセスすることはできません。あなたは、あなたが仕事に、このため、通常のクラスのメソッドを使用する必要が

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

と

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

Answer 2

ある値を、取得するための反応の好適な方法を使用する必要があります。また、refにセミコロンを付けるべきではありません。あなたのケースでは

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

、あなたも、このコードを入力値を取得することができます：@Vikramadityaはそれが `Input`はリファレンスを渡していないためです言ったように

this.inputtext.inputRef.value