时间戳

首页 > 解决方案 > React - 点击时获取输入值

reactjs - React - 点击时获取输入值

问题描述

我对 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;

任何帮助将不胜感激。另外，容易加分！

标签： reactjsinputonclick

解决方案

您也忘记了绑定search方法（在构造函数内部）： 

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

推荐阅读