import React, { Component } from 'react';
import './index.css'
class Register extends Component {
constructor(props) {
super(props);
this.state = {
user_password: "",
user_email: "",
count: 60,
liked: true
};
this.handleSubmit = this.handleSubmit.bind(this);
}
countDown() {
const { count } = this.state;
if (count === 1) {
this.setState({
count: 60,
liked: true
});
} else {
this.setState({
count: count - 1,
liked: false
});
setTimeout(this.countDown.bind(this), 1000);
}
}
handleClick = () => {
const { sendMsg } = this.props;
const { liked } = this.state;
if (!liked) {
return;
}
this.countDown();
};
//表單提交
handleSubmit(event) {//event對應form控件
this.setState({
user_email: this._inputEmail.value, //得到文本框裏面的內容,即email
user_password: this._inputPassword.value, //得到用戶輸入的password
});
console.log(this._inputEmail.value);
console.log(this.state.user_email);
//向後臺發送註冊信息
//const _this = this; //先存一下this,以防使用箭頭函數this會指向我們不希望它所指向的對象。
this.axios({
method: "post",
url: "/api/users/register",
data: {
user_email: this.state.user_email,
user_password: this.state.user_password
}
})
.then(response => {
console.log(response.data);
})
.catch(function(error) {
console.log(error);
});
event.preventDefault();
}
render() {
//下面可以通過ref屬性訪問input的真實的dom對象
return (
<div id="register">
<br />
<form onSubmit={this.handleSubmit}>
<label>郵箱號:</label>
<input
type="text"
ref={email => (this._inputEmail = email)}
placeholder="請輸入郵箱號"
/>
<br />
<br />
<label>密碼:</label>
<input
type="text"
ref={password =>
(this._inputPassword = password)
}
placeholder="請輸入密碼"
/>
<br />
<br />
<span>
<input placeholder="驗證碼" />
</span>
<span
onClick={() => this.handleClick()}
type="primary"
>
{this.state.liked
? "獲取驗證碼"
: `${this.state.count} 秒後重發`}
</span>
<br />
<br />
<button type="submit" className="btn btn-primary">
註冊
</button>
</form>
</div>
);
}
}
export default Register;
react遇到一個問題,不知道爲什麼this.state存不進去ref的value
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.