reactjs React TypeScript onSubmit e.preventDefault()不工作

dgiusagp 于 2023-04-20 发布在 React

关注(0)|答案(5)|浏览(137)

我正在使用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>
    );
  }

有什么建议吗？谢谢！

reactjs

来源：https://stackoverflow.com/questions/56562153/react-typescript-onsubmit-e-preventdefault-not-working

5条答案

按热度按时间

mwg9r5ms1#

您在错误的位置添加了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>
    );
  }

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

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

赞(0）回复(0）举报 2023-04-20

ffscu2ro2#

你可以简单地这样做：

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

赞(0）回复(0）举报 2023-04-20

p4tfgftt3#

另外，除了将事件从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>

赞(0）回复(0）举报 2023-04-20

zujrkrfu4#

我通过从handleSubmit函数中删除e.preventDefault并在button上添加**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>
    );
  }

这是测试和应该工作。

赞(0）回复(0）举报 2023-04-20

vsnjm48y5#

const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault()
    }

return (
    <form onSubmit={e => handleSubmit(e)}>
            <label>Name</label>
            <input type="text" placeholder='John Doe'/>

            <label>Email</label>
            <input type="email" placeholder='example@doamin.com'/>

            <input type="submit"/>
    </form>
)

赞(0）回复(0）举报 2023-04-20

我来回答

reactjs React TypeScript onSubmit e.preventDefault()不工作

5条答案

相关问题

热门标签

最新问答