React- HTTP 请求在页面加载时触发

Question

我刚开始使用 React，我有一个包含以下内容的登录模型组件：

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() 函数在页面加载时触发，而不是在单击按钮时触发。我这样做是正确的方法吗？这段代码的大部分是由一个比我有更多 React 经验的同事编写的，所以我可能把登录功能完全放在了错误的地方。如果是这样，请让我知道该功能应该放在哪里。

Answer 1

this.login() 应作为 this.login 提供给 onClick() 处理程序

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

React- HTTP 请求在页面加载时触发

React- HTTP request is firing on page load

http

reactjs

react-jsx

redux