Question

我试图做一些非常简单的事情。我想只输入我的搜索框，然后onSubmit（）将我的值传递给另一个函数。当我尝试和console.log我的表单值时，我只是未定义。如果我将onChange（）添加到我的文本框标签，它可以工作，但我不想这样做。我希望我的行动开始于提交（）

  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：我已经在构造函数（）函数中绑定了我的函数。

Answer 1

编辑：修正了代码

当您输入输入时，状态应该更新，否则您将不会在输入字段中收到任何值。

您的代码中存在一些问题：

input type =“text”的值prop应设置为this.state.query
您需要一个绑定的onchange事件来输入以更新状态。

类似的东西：

onInputChange(event){
    this.setState({query : event.target.value});
}

Answer 2

那是因为您需要将值保留在某处，您需要定义受控输入以使值保持在该状态，例如：

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>
  );
}

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

Answer 3

事件目标不是文本字段，因此这就是为什么会出现未定义的原因。

有两种解决方案，要么将ref（https://facebook.github.io/react/docs/refs-and-the-dom.html）添加到文本字段

<form onSubmit={this.handleSearch}>
<input type="text" name="query"/>
<input ref={(input) => { this.textInput = input; }} type="submit" value="Submit" />

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

或将onchange添加到文本域以及到onsubmit。 Onchange将填充状态，然后onsubmit将从状态读取数据。

ReactJS在提交后无法从表单中获取值

3 个答案: