onClickのは、クリックハンドラを発射しませ

Question

私のクリックハンドラしない火災：私のボタンON

submitForm(UserDetails) { 
    axios 
     .post('http://localhost:3001/api/users', UserDetails) 
     .then(function(response) { 
      console.log(response); 
     }) 
     .catch(function(error) { 
      console.log(error); 
     }); 
} 

：

<button 
      className="btn btn-primary" 
      onClick={this.submitForm(this.props.UserDetails)}> 
      Upload 
     </button> 

私は私のコンストラクタで、このにそれを結合した：

constructor() { 
    super(); 
    this.submitForm = this.submitForm.bind(this); 
} 

アイデアonClickので

Answer 1

あなたはコンストラクタ

this.submitForm = this.submitForm.bind(this); 

からバインドを削除し、onClickのに適切な機能を渡す機能を呼び出す代わりに

<button 
    className="btn btn-primary" 
    onClick={this.submitForm(this.props.UserDetails)}> 
    Upload 
</button> 

機能の参照を渡しているフック

<button 
    className="btn btn-primary" 
    onClick={(e) => this.submitForm(this.props.UserDetails)}> 
    Upload 
</button>