React - get value of input on click

Question

I'm pretty new to React. I have a simple app where text is entered into an input field and then sent to a server when a button is clicked. How can I get the value of the input field? This is incredbily easy in jQuery but I can't figure it out with React.

Here's my code:

import React, { Component } from 'react';
import './App.css';

class App extends Component {
    constructor(props){
        super(props)

        this.state = {
          terms: ''
        }

        this.updateTerms = this.updateTerms.bind(this);
    }

    updateTerms(evt) {
        this.setState({
            terms: evt.target.value
            })
    }

    search() {

        alert(this.state.terms)
    }

    render() {

    const btn1 = {
      width: '100%',
      backgroundColor: 'white'
    }


    return (
      <div className= 'wrapper'>
        <div className= 'item1'>
          Specials Fact Tree Demo
            </div>
        <div className= 'item2'>
          Search Term(s):<br/>
            <input className= 'form-control'  type="text" onChange={this.updateTerms} />
              <br/>
                <div id = 'results' >
                  <div id='resultsWrap' >
                    <select className= 'form-control' id= 'styles' ></select>
                  <select className= 'form-control' id= 'similar' ></select>

                <div id= 'attsDiv' className= 'form-control' >
                <dl id= 'atts'></dl>
              </div>
                </div>



            </div>
          <button className="btn btn-default" style = {btn1} id= 'search' onClick={this.search}>Search</button>
          <div id="activeTraining" >

            </div>
          </div>
        </div>
    );
  }
}

export default App;

Any help would be greatly appreciated. Plus, easy points!

Is it not working?

Imanali Mamadiev
– Imanali Mamadiev

2018-06-06 13:59:42 +00:00
Commented Jun 6, 2018 at 13:59 — Imanali Mamadiev
– Imanali Mamadiev, Commented Jun 6, 2018 at 13:59
No, it keeps saying "cannot get value of undefined".

Evan Lalo
– Evan Lalo

2018-06-06 14:01:20 +00:00
Commented Jun 6, 2018 at 14:01 — Evan Lalo
– Evan Lalo, Commented Jun 6, 2018 at 14:01

Sagiv b.g · Accepted Answer · 2018-06-06 14:01:30Z

1

You forgot to bind the search method as well (inside the constructor):

this.search = this.search.bind(this);

answered Jun 6, 2018 at 14:01

Sagiv b.g

31.1k10 gold badges72 silver badges106 bronze badges

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

2 Comments

Evan Lalo Over a year ago

Wow.... thanks. Like I said, easy points. I'll accept your answer when the minimum time expires.

Sagiv b.g Over a year ago

hehe that was fun

chillyistkult · Accepted Answer · 2018-06-06 14:19:40Z

0

If you are already familar with ECMAScript 6 you can just use arrow functions and save on the bindings like:

search = () => {
   alert(this.state.terms)
}

answered Jun 6, 2018 at 14:19

chillyistkult

1,1592 gold badges12 silver badges24 bronze badges

Collectives™ on Stack Overflow

React - get value of input on click

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related