1
这是我的方法：当应用在浏览器中刷新时，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;
每次我的应用程序在浏览器中刷新我得到这个：
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,
，但我得到的是没有点击按钮。为什么会自动触发onClick方法？
道具是否通过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;
因为你调用函数_login> this._login（this.props.client）使用this._login.bind（this.props.client），而不是 –
谢谢，那是真棒。 @AshKander我是否正确传递变量？ – hipkiss
我想补充'this._login = this._login.bind（本）'在你的构造函数，然后只是参考'this.props.client'从内'_login（）'，而不是将它作为一个参数。 –