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;

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