Question

当用户使用enter时，我试图提交表单。现在，它只是刷新并将我带到端点/?。在单击之前，一切正常。

 class NavBar extends Component {
     constructor(props) {
        super(props);
        this.state = {
          term: ''
        }
    this.search = this.search.bind(this);
    this.onChange = this.onChange.bind(this);
}

onChange(e) {
  this.setState({
      term: e.target.value
  });
}

search() {
    event.preventDefault();
    event.stopPropagation();
    this.props.searchrequest(this.state.term);
}

render() {
    return (
                <form onSubmit={this.search}>
                    <input type="text" placeholder="Search" value={this.state.term} onChange={this.onChange}/>
                    <button type="submit" >Search</button>
                </form>
      )}

Answer 1

您在event函数中缺少search参数。像这样使用它：

search( event ) {
    event.preventDefault();
    event.stopPropagation();
    this.props.searchrequest(this.state.term);
}

Answer 2

尝试将事件对象作为this.search中的第一个参数

search(event) { event.preventDefault()}

Answer 3

在您的提交事件处理程序中使用event.preventDefault（）。（它的参数中缺少“事件”）

在React上输入Enter

3 个答案: