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。

  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的{{1}}，您的onSubmit / input必须具有button

Answer 2

此外，除了将事件从 onClick 移动到 onSubmit，要从表单中获取事件，请键入 React.FormEvent 工作。

wid=$(awk '
  NR == 2 {
    for (i=1; i<=NF; i++) printf "%d ", 1 + length($i)
    exit
  }
' file)

gawk -v FIELDWIDTHS="$wid" '
  NR != 2 {
    for (i=1; i<NF; i++) printf "%s|", $i
    print $NF
  }
' file

Answer 3

你可以简单地这样做:-

 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 4

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

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

这已经过测试，应该可以工作。

反应TypeScript onSubmit e.preventDefault（）不起作用

4 个答案: