javascript - ReactJS 提交后无法从表单获取值

Question

我正在尝试做一些非常简单的事情。我只想在搜索框中输入内容，然后 onSubmit() 将我的值传递给另一个函数。当我尝试 console.log 我的表单值时，我只得到未定义的结果。如果我将 onChange() 添加到我的文本框标签中，它可以工作，但我不希望这样。我希望我的操作从 onSubmit() 开始

  handleSearch(event){
    this.setState({query: event.target.value})
    console.log(event.target.value)
    event.preventDefault();
  }

  render(){
    return (
      <div className='ontology_tool'>
      <div className='wraper'>
        <div className='search'>
          <div className='search_tool'>
            <form onSubmit={this.handleSearch}>
              <input type="text" name="query"/>
              <input type="submit" value="Submit" />
            </form>
          </div>
        </div>
        <div className='selected'>
        </div>
      </div>
      </div>
    );
  }

PS:我已经在我的 constructor() 函数中绑定(bind)了我的函数。

Answer 1

那是因为你需要将值保存在某个地方，你需要定义一个受控输入来将值保存在状态中，例如:

setQuery = (event) => {
  this.setState({
    query: event.target.value,
  });
}

handleSearch(event){
  // do whatever you want onsubmit
  event.preventDefault();
}

render(){
  return (
    <div className='ontology_tool'>
    <div className='wraper'>
      <div className='search'>
        <div className='search_tool'>
          <form onSubmit={this.handleSearch}>
            <input type="text" name="query" onChange={this.setQuery}/>
            <input type="submit" value="Submit" />
          </form>
        </div>
      </div>
      <div className='selected'>
      </div>
    </div>
    </div>
  );
}

我建议使用受控输入，而不是乱搞引用。