获取 ReactJS 中 state 中的搜索值

Question

我是 ReactJS 的新手，并试图获取搜索输入框值并将其存储在 state 中。

我的代码：

<form className="search-form" onSubmit={this.handleSubmit}>
      <input type="search" name="search" ref={(input) => this.query = input}
                               placeholder="Search..." />
      <button className="search-button" type="submit" id="submit">Go!</button>
</form>

内部构造函数：

this.handleSubmit = this.handleSubmit.bind(this);

和

handleSubmit = e => {
        e.preventDefault();
        this.setState({search: this.query.value});
        console.log(this.state.search) //Returns undefined
        e.currentTarget.reset();
    }

非常感谢任何帮助。

Answer 1

我建议您使用受控输入方法。

state = {
   value: null,
}

handleValue = (e) => this.setState({ value: e.target.value });

然后你不必使用ref 。

<input 
   type="search" 
   name="search" 
   onChange={this.handleValue}
   placeholder="Search..." 
/>

Answer 2

此代码可以帮助您：

import React from 'react';
class search extends React.Component{
    constructor(props)
    {
      super(props);
      this.state = {value: ''};
      this.addValue = this.addValue.bind(this);
      this.updateInput = this.updateInput.bind(this);
    }

    addValue(evt)
    {
      evt.preventDefault();
      if(this.state.value !==undefined)
      {
        alert('Your input value is: ' + this.state.value)
      }
    }
    updateInput(evt){
      this.setState({value: evt.target.value});   
        }

    render()
    {
      return (
      <form onSubmit={this.addValue}>
      <input type="text" onChange={this.updateInput} /><br/><br/>
      <input type="submit" value="Submit"/>
      </form>
      )
    }
}
export default search;