react遇到一個問題,不知道爲什麼this.state存不進去ref的value

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;

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章