Javascript 获取ReactJS中处于状态的搜索值

我是ReactJS新手，尝试获取搜索输入框的值并将其存储在状态中

我的代码：

<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>

及

---

非常感谢您的帮助。

我建议您使用受控输入法

state = {
   value: null,
}

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

那么您就不必使用

ref

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

---

此代码可能会帮助您：

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;

从“React”导入React；
类搜索扩展了React.Component{
建造师（道具）
{
超级（道具）；
this.state={value:''}；
this.addValue=this.addValue.bind（this）；
this.updateInput=this.updateInput.bind（this）；
}
附加值（evt）
{
evt.preventDefault（）；
if（this.state.value！==未定义）
{
警报（'您的输入值为：'+this.state.value）
}
}
更新输入（evt）{
this.setState（{value:evt.target.value}）；
}
render（）
{
返回(



)
}
}
导出默认搜索；

谢谢。是否可以不刷新页面。当我单击“提交”按钮时，它会刷新页面。您需要调用

e.preventDefault（）

，以防止提交表单的默认行为。@PrithvirajMitra或从按钮：）中删除

type=“submit”

）我的意思是，将其更改为例如

type=“button”

@kinduser是，我现在正在获取值。非常感谢。@PrithvirajMitra如果您在“handleSubmit”函数中使用console.log值，那么它应该是正确的值<代码>控制台.log（this.state.value）

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

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;