React TypeScript onSubmit e.preventDefault() 不工作

Question

我正在使用 React 和 TypeScript 构建一个简单的用户搜索应用程序。我有一个基本表单，其中包含一个用于搜索用户的输入文本框和一个用于提交搜索的输入按钮。但是我的onSubmit方法中的e.preventDefault()方法好像不起作用。当我提交时，整个应用程序都会刷新。实际上，可能根本就没有调用 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 而不是在按钮中添加。

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

如果您查看 the example on the docs，您会看到他们将其添加到 form。

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

Answer 2

我通过从 handleSubmit 函数中删除 e.preventDefault 并在按钮上添加 **onClick={e => {e.preventDefault(); this.handleSubmit()}}** 来解决类似的问题。并且您必须将 onSubmit 放在 Form 上。

  private handleSubmit = (e: React.FormEvent<HTMLInputElement>) => {
    this.props.searchUsers(this.state.text);
    this.setState({text: ''});
  }
  public render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit} 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" 
            onClick={e => {e.preventDefault(); this.handleSubmit()}}
          />
        </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>

Answer 4

你可以简单地这样做:-

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

React TypeScript onSubmit e.preventDefault() 不工作

React TypeScript onSubmit e.preventDefault() not working

forms

form-submit

typescript

reactjs