Javascript 当应用程序在浏览器中刷新时，React-onClick方法自动激发？

这是我的方法：

// jshint esversion: 6
import React, { Component } from 'react';

import Forgot from './LoginForm/Forgot.js';
import RememberMe from './LoginForm/RememberMe.js';

class LoginForm extends Component {
    constructor(props) {
        super(props);
        this.props = props;
        this.state = {
            pic1: '//ssl.gstatic.com/accounts/ui/avatar_2x.png'
        };
    }

    _login(client){
        let username = document.getElementById('inputEmail').value;
        let password = document.getElementById('inputPassword').value;
        this.options = {
            username: username,
            password: password
        };
        client.login(this.options, (success, data)=>{
            if (success) {
                console.log('You are now logged in', data);
            }else{
                console.log('Details incorrect or something went wrong.');
            }
        });
    }

    render() {
        return (
            <div className="container">
                <div className="card card-container">
                    <img id="profile-img" className="profile-img-card" src={this.state.pic1} />
                    <p id="profile-name" className="profile-name-card"></p>
                    <form className="form-signin">
                        <span id="reauth-email" className="reauth-email"></span>
                        <input type='text' id="inputEmail" className="form-control" placeholder="Username"></input>
                        <input type="password" id="inputPassword" className="form-control" placeholder="Password"></input>
                        <button className="btn btn-lg btn-success btn-block btn-signin" type="submit" onClick={this._login(this.props.client)}>Login</button>
                    </form>
                </div>
            </div>
        );
    }
}

export default LoginForm;

但我没按按钮就知道了。为什么react会自动触发onClick方法？
该错误是由从props传递

客户机

变量引起的吗？对于向组件传递变量/方法和从组件传递变量/方法，我是否应该将变量/方法存储在

状态

，而不是从父组件传递

这就是我传递变量的方式-正确吗

class App extends Component {
  constructor(){
    super();
    this._client = deepstream('ws://localhost:6020');
  }

  render() {
    return (
      <div className="App">
        <LoginForm client={this._client}></LoginForm>
      </div>
    );
  }
}

export default App;

类应用程序扩展组件{
构造函数（）{
超级（）；
这个._client=deepstream（'ws://localhost:6020'）；
}
render（）{
返回(
);
}
}
导出默认应用程序；

用示例总结评论

您正在渲染过程中调用

this.\u在
onClick
中登录

函数，而不是在单击时指定要调用的函数

使用Doug Coburn的函数#bind suggestion

//jshint esversion:6
从“React”导入React，{Component}；
从“/LoginForm/forget.js”导入忘记；
从“./LoginForm/RememberMe.js”导入RememberMe；
类LoginForm扩展组件{
建造师（道具）{
超级（道具）；
this.props=props；
此.state={
pic1:“//ssl.gstatic.com/accounts/ui/avatar_2x.png”，
};
this.\u login=this.\u login.bind（this）；
}
_登录（）{
const username=document.getElementById（'inputEmail'）。值；
const password=document.getElementById（'inputPassword'）。值；
此选项={
用户名，
密码，
};
this.props.client.login（this.options，（success，data）=>{
如果（成功）{
log（'您现在已登录'，数据）；
}否则{
log（'详细信息不正确或出现问题'）；
}
});
}
render（）{
返回(

登录
);
}
}
导出默认登录信息因为您调用了_login函数>this。_login（this.props.client）使用这个。_login.bind（this.props.client）代替谢谢，太棒了@AshKander我是否正确地传递了变量？我将在构造函数中添加
this.\u login=this.\u login.bind（this）
，然后从
\u login（）中引用
this.props.client
而不是将其作为参数传入。或者您可以在
onClick
中使用arrow函数，您可以在render中将arrow函数指定给const，并在onClick中内联引用，并且它比构造函数更接近源代码，因此可以认为，如果使用得当，它有助于可读性。我不确定deepstream在做什么，但这可能会有问题，很难说。最好/最好/需要在SO上发布单个问题。
class App extends Component {
  constructor(){
    super();
    this._client = deepstream('ws://localhost:6020');
  }

  render() {
    return (
      <div className="App">
        <LoginForm client={this._client}></LoginForm>
      </div>
    );
  }
}

export default App;