Reactjs React-TypeScript onSubmit e.preventDefault（）不工作

我正在使用React和TypeScript构建一个简单的用户搜索应用程序。我有一个基本表单，带有一个用于搜索用户的输入文本框和一个提交搜索的输入按钮。但是我的

onSubmit

方法中的

e.preventDefault（）

方法似乎不起作用。当我提交时，整个应用程序都会刷新。实际上，可能根本没有调用submit上的

onSubmit

private handleSubmit=（e:React.FormEvent）=>{
e、 预防默认值（）；
this.props.searchUsers（this.state.text）；
this.setState（{text:'}）；
}
私有handleChange=（e:React.FormEvent）=>{
this.setState（{text:e.currentTarget.value}）；
}
公共渲染（）{
返回(
);
}

---

有什么建议吗？谢谢

您在错误的位置添加了

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

public render（）{
返回(
//\/在此处添加
);
}

如果您查看，您将看到他们将其添加到
表单中

*请记住，要触发
表单
的
onSubmit
，您的
输入
/
按钮
需要有
type=“submit”
我通过从handleSubmit函数中删除
e.preventDefault
并添加
**onClick={e=>{e.preventDefault（）；this.handleSubmit（）修复了类似的问题**
打开按钮。
你必须以表格的形式提交

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

private handleSubmit=（e:React.FormEvent）=>{
this.props.searchUsers（this.state.text）；
this.setState（{text:'}）；
}
公共渲染（）{
返回(
{e.preventDefault（）；this.handleSubmit（）}}
/>
);
}

这是经过测试的，应该可以工作。
除了将事件从onClick移动到onSubmit之外，要从表单中获取事件，请键入React.FormEvent works

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

Instead of e:React.FormEvent<HTMLInputElement> 

private handleSubmit=（e:React.FormEvent）=>{
e、 预防默认值（）；
this.props.searchUsers（this.state.text）；
this.setState（{text:'}）；
}```
而不是e:React.FormEvent
您只需执行以下操作：-

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

private handleSubmit=（e:React.FormEvent）=>{
e、 预防默认值（）；
this.props.searchUsers（this.state.text）；
this.setState（{text:'}）；
}
私有handleChange=（e:React.FormEvent）=>{
this.setState（{text:e.currentTarget.value}）；
}
公共渲染（）{
返回(
此.handleSubmit（e）}>
);
}
这将帮助您：表单提交处理程序的事件类型应为：e:React.FormEvent