React- HTTPリクエストは、私はちょうど使用し始めているページのロード

Question

に発射されるが反応し、私は次のようで、このログインモデルコンポーネントを持っている：

モデル自体に

export default class LoginModal extends Component { 

    constructor() { 
    super(); 
    this.render.bind(this); 
    this.state = {showModal: false} 
    } 

    close() { 
    this.setState({ showModal: false }); 
    } 

    open() { 
    this.setState({ showModal: true }); 
    } 

    login() { 
    console.log("Hello. It's Me") 
    axios.post('https://crossorigin.me/http://requestb.in/w21igbw2', { 
     firstName: 'Fred', 
     lastName: 'Flintstone' 
    }) 
    .then(function (response) { 
     console.log(response); 
     //this.setState({ showModal: false }); 
    }) 
    .catch(function (error) { 
     console.log(error); 
    }); 
    } 

    handleSelect(eventKey) { 
    event.preventDefault(); 
    alert(`selected ${eventKey}`); 
    } 

私は<Button onClick={this.login()} bsStyle="btn btn-black btn-block">Login</Button>を持っていますが、login()機能ボタンがクリックされたときにページが読み込まれないとすぐに起動します。これを正しい方法でやっていますか？このコードのほとんどは、私よりも反応の経験が豊富な同僚によって書かれているので、ログイン機能を間違った場所に置いている可能性があります。もしそうなら、関数がどこに行かなければならないか教えてください。

Answer 1

this.login()は私の推測では、効果的に、あなたが代わりに `` `{} this.loginの` {（）} this.loginとしてそれを渡しているということですonClick()ハンドラにthis.login

<Button onClick={this.login} bsStyle="btn btn-black btn-block">Login</Button>