Submit.preventDefault()에서 TypeScript 대응이 작동하지 않음

Submit.preventDefault()에서 TypeScript 대응이 작동하지 않음

나는 리액트와 타입스크립트를 이용한 간단한 사용자 검색 앱을 만들고 있다. 나는 사용자를 검색하기 위한 입력 텍스트 상자와 검색을 제출하는 입력 버튼이 있는 기본 양식을 가지고 있다. 하지만 내 방법은 효과가 없는 것 같아. 내가 제출하면 전체 앱이 새로 고쳐진다. 사실, 그것은 전혀 불려지지 않을 수도 있다.

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

좋은 의견이라도 있나? 감사합니다!

---

잘못된 위치에 추가하고 있습니다.

너는 버튼에 없는 것을 추가해야 한다.

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

에서 추가하는 것을 확인할 수 있습니다.

* 를 트리거하려면 /가 필요합니다

---

handleSubmit 기능을 제거하고 on 버튼을 추가하여 유사한 문제를 해결했습니다. 그리고 당신은 양식에 제출해야 합니다.

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

이는 테스트를 거쳤으므로 작동해야 합니다.

---

또한 이벤트를 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> 

---

간단하게 할 수 있어요 :-

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

---

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