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（）'，而不是將它作爲一個參數。 –