2016-09-30 113 views
0

我刚开始使用的反应,我有以下此登录模型组件:React- HTTP请求射击页面加载

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()功能一旦页面加载而不是单击按钮时触发。我是否以正确的方式做这件事?这些代码中的大部分都是由一位有更多反应经验的同事编写的,所以我可能会将登录功能完全放在错误的地方。如果是这样,请让我知道函数应该在哪里。

+2

我的猜测是,你把它当作'{this.login()}'而不是'{this.login}',有效立即调用它而不是传递引用,但没有看到你的'render'方法只是一个猜测。 – ivarni

+0

就是这样,现在有点工作,除了我刚刚意识到它发送的请求是一个获取请求而不是一个帖子。 – jmona789

+0

那将是一个关于axios的问题。不幸的是,我对这个图书馆一无所知。 – ivarni

回答

1

this.login()应给出this.loginonClick()处理

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