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()函数就会触发。我这样做是正确的吗？大部分代码都是由一个比我更有反应经验的同事编写的，因此我可能会将登录功能完全放在错误的位置。如果是这样，请让我知道功能应该去哪里。

Answer 1

this.login()应以this.login方式提供给onClick()处理程序

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

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

1 个答案: