javascript - 当应用程序在浏览器中刷新时，React onClick 方法会自动触发吗？

Question

这是我的方法:

// 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;

每次我的应用程序在浏览器中刷新时，我都会得到这个:

TypeError: Cannot read property 'value' of null
LoginForm._login
C:/wamp64/www/myreact/src/components/LoginForm.js:17
  14 | }
  15 | 
  16 | _login(client){
> 17 |  let username = document.getElementById('inputEmail').value;
  18 |  let password = document.getElementById('inputPassword').value;
  19 |  this.options = {
  20 |      username: username,

但我没有点击按钮就明白了。为什么react会自动触发onClick方法？
错误是从props中通过client变量引起的吗？用于在组件之间传递变量/方法 我应该将变量/方法存储在 state 中而不是从父组件传递吗？

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

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;

Answer 1

用例子总结评论。

您在渲染期间调用 onClick 中的 this._login 函数，而不是分配单击时调用的函数。

使用 Doug Coburn 的 Function#bind 建议

// 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',
    };

    this._login = this._login.bind(this);
  }

  _login() {
    const username = document.getElementById('inputEmail').value;
    const password = document.getElementById('inputPassword').value;
    this.options = {
      username,
      password,
    };
    this.props.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" />
          <form className="form-signin">
            <span id="reauth-email" className="reauth-email" />
            <input type="text" id="inputEmail" className="form-control" placeholder="Username" />
            <input type="password" id="inputPassword" className="form-control" placeholder="Password" />
            <button className="btn btn-lg btn-success btn-block btn-signin" type="submit" onClick={this.login}>Login</button>
          </form>
        </div>
      </div>
    );
  }
}

export default LoginForm;

使用箭头函数的建议

// 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) {
    const username = document.getElementById('inputEmail').value;
    const password = document.getElementById('inputPassword').value;
    this.options = {
      username,
      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() {
    const login = () => this._login(this.props.client);
    
    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" />
          <form className="form-signin">
            <span id="reauth-email" className="reauth-email" />
            <input type="text" id="inputEmail" className="form-control" placeholder="Username" />
            <input type="password" id="inputPassword" className="form-control" placeholder="Password" />
            <button className="btn btn-lg btn-success btn-block btn-signin" type="submit" onClick={login}>Login</button>
          </form>
        </div>
      </div>
    );
  }
}

export default LoginForm;

如果我没有犯任何错误，两者都应该可以解决您的问题 1，请随意争论哪个更好/最好。 :)

第二个问题应该拆分成它自己的 SO 问题，以便给出明确的答案。