wie preventDefault in componentDidMount()

Question

Ich versuche, den Zustand zu aktualisieren, nachdem ich eine API aufgerufen habe, aber ich muss preventDefault, damit mein Formular keine Neuladung der Seite auslöst. Ich habe Schwierigkeiten, Informationen zu finden, um das mit React so zu machen, wie ich es versuche.

es auf diese Weise versuchen, erhalte ich:

<form className="form-inline" onSubmit={this.componentDidMount} > 
     <input 
      placeholder="Search your city!" 
      className="form-control" 
      value={this.state.term} 
      onChange={this.onInputChange}></input> 
     <button 
      type="submit" 
      className="btn btn-default">Search</button> 
</form> 

componentDidMount(event) { 
    event.preventDefault(); 
    const API_KEY = 'ju2nvu4nvun42vgrw'; 
    const ROOT_URL = `http://api.openweathermap.org/data/2.5/forecast? 
         appid=${API_KEY}`; 
    const city = this.state.term; 
    const url = `${ROOT_URL}&q=${city}`; 
    axios.get(url) 
     .then(function (response) { 
      this.setState({ 
       days: response.data 
      }) 
    }); 
} 

Answer 1

componentDidMount ist eine lifeCycle Funktion „Typeerror nicht Eigentum‚prevent‘undefinierter lesen kann“, können Sie die Funktion nicht direkt aufrufen, sollten Sie stattdessen Ajax-Request in ein bewegen separate Funktion und rufen Sie es wie

<form className="form-inline" onSubmit={this.handleSubmit} > 
     <input 
      placeholder="Search your city!" 
      className="form-control" 
      value={this.state.term} 
      onChange={this.onInputChange}></input> 
     <button 
      type="submit" 
      className="btn btn-default">Search</button> 
</form> 

handleSubmit(event) { 
    event.preventDefault(); 
    const API_KEY = 'ju2nvu4nvun42vgrw'; 
    const ROOT_URL = `http://api.openweathermap.org/data/2.5/forecast? 
         appid=${API_KEY}`; 
    const city = this.state.term; 
    const url = `${ROOT_URL}&q=${city}`; 
    axios.get(url) 
     .then(function (response) { 
      this.setState({ 
       days: response.data 
      }) 
    }); 
}