Реагировать - получить значение ввода по клику

Question

Я довольно новичок в React.У меня есть простое приложение, где текст вводится в поле ввода и затем отправляется на сервер при нажатии кнопки.Как я могу получить значение поля ввода?Это невероятно легко в jQuery, но я не могу понять это с помощью React.

Вот мой код:

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;

Любая помощь будет принята с благодарностью.Плюс легкие очки!

Answer 1

Если вы уже знакомы с ECMAScript 6, вы можете просто использовать функции стрелок и сохранять привязки, такие как:

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

Answer 2

Вы забыли также связать метод search (внутри конструктора):

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