How to take inputs from <Input/> in react semantic UI

Question

I've been trying to take inputs from an input field and i used refs(the usual way in react), But it doesn't seem to be working. The input i'm getting is undefined. This is my 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>
   );
}

I need to take the inputs from the click event of the button. I can't figure out what's wrong. How can i get the input value properly?

Sunil Rajput · Accepted Answer · 2017-07-28 13:23:00Z

9

In your case, you can also get the input value through this code:

this.inputtext.inputRef.value

edited Jul 28, 2017 at 13:23

Sunil Rajput

9909 silver badges19 bronze badges

answered Jul 28, 2017 at 10:58

Sole Valero

911 silver badge1 bronze badge

Sign up to request clarification or add additional context in comments.

1 Comment

Michael Ceber Over a year ago

Yep this is what I do as well.

Vikramaditya · Accepted Answer · 2018-05-17 13:09:28Z

6

Since you have used the arrow operator, this.inputtext.value won't work, you need to write:

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

In this case semantic-ui's Input Component is a div wrapped on top of input. So you cannot access input element directly through ref. You should use the react's preferred way to get the value, which is

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


handleMessage (e) { console.log(e.target.value); }

or without using bind, babel-preset-stage-2 is required for this.

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


handleMessage = e => { console.log(e.target.value); }

edited May 17, 2018 at 13:09

answered Mar 10, 2017 at 11:20

Vikramaditya

5,5947 gold badges37 silver badges47 bronze badges

Comments

spirift · Accepted Answer · 2017-03-10 11:32:32Z

1

You need to use a normal class method for this to work. You also shouldn't have a semi-colon in the 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>
   );
  }

answered Mar 10, 2017 at 11:32

spirift

3,0721 gold badge16 silver badges20 bronze badges

2 Comments

Madushika Perera Over a year ago

im still getting it as undefined

spirift Over a year ago

As @Vikramaditya said it is due to Input not passing the ref prop to the input tag it generates. Try just using a plain input tag.

Collectives™ on Stack Overflow

How to take inputs from <Input/> in react semantic UI

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related