React TypeScript onSubmit e.preventDefault() 不起作用

Question

我正在使用 React 和 TypeScript 构建一个简单的用户搜索应用程序。我有一个基本表单，带有一个用于搜索用户的输入文本框和一个用于提交搜索的输入按钮。但是e.preventDefault()我的方法中的onSubmit方法似乎不起作用。当我提交时，整个应用程序都会刷新。实际上，它onSubmit甚至可能根本没有被调用。

  private handleSubmit = (e: React.FormEvent<HTMLInputElement>) => {
    e.preventDefault();
    this.props.searchUsers(this.state.text);
    this.setState({text: ''});
  }

  private handleChange = (e: React.FormEvent<HTMLInputElement>) => {
    this.setState({text: e.currentTarget.value});
  }

  public render() {
    return (
      <div>
        <form className="form">
          <input 
            type="text" 
            name="text" 
            value={this.state.text} 
            placeholder="Search Users..."
            onChange={this.handleChange}
          />
          <input 
            type="submit"
            value="search"
            className="btn btn-dark btn-block" 
            onSubmit={this.handleSubmit}
          />
        </form>
      </div>
    );
  }

有什么建议？谢谢！

Answer 1

你onSubmit在错误的地方添加。

您应该form在按钮中添加not。

  public render() {
    return (
      <div>                    // \/ added here
        <form className="form" onSubmit={this.handleSubmit}>
          <input 
            type="text" 
            name="text" 
            value={this.state.text} 
            placeholder="Search Users..."
            onChange={this.handleChange}
          />
          <input                 // removed from the button
            type="submit"
            value="search"
            className="btn btn-dark btn-block" 
          />
        </form>
      </div>
    );
  }

如果您查看文档中的示例，您会看到他们将它添加到form.

*请记住，要触发form's onSubmit，您的input/button需要有type="submit"

Answer 2

你可以简单地这样做：-

 private handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    this.props.searchUsers(this.state.text);
    this.setState({text: ''});
  }

  private handleChange = (e: React.FormEvent<HTMLInputElement>) => {
    this.setState({text: e.currentTarget.value});
  }

  public render() {
    return (
      <div>
        <form className="form"   onSubmit={(e) =>this.handleSubmit(e)}>
          <input 
            type="text" 
            name="text" 
            value={this.state.text} 
            placeholder="Search Users..."
            onChange={this.handleChange}
          />
          <input 
            type="submit"
            value="search"
            className="btn btn-dark btn-block" 
          
          />
        </form>
      </div>
    );
  }

Answer 3

此外，除了将事件从 onClick 移至 onSubmit 之外，要从表单获取事件，还可以输入 React.FormEvent 。

  private handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    this.props.searchUsers(this.state.text);
    this.setState({text: ''});
  }```

Instead of e:React.FormEvent<HTMLInputElement>