reactjs - 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。

您应该在表单中添加，而不是在按钮中添加。

  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的onSubmit，您的input/button需要有类型=“提交”