这是我的方法:
// 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;
最佳答案
用例子总结评论。
您在渲染期间调用 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 问题,以便给出明确的答案。
关于javascript - 当应用程序在浏览器中刷新时,React onClick 方法会自动触发吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45533018/