_ this.showmodal由于ref ReactJ中的ref而不是一个函数

Question

我正在使用参考文献中打开登录注册页面中的OTP模态组件。我在构造函数中创建了REF this.otpModalRef = React.createRef();，并在寄存器API成功中调用this.showModal，但下面的不确定是我的代码。如果我从constructor删除了this.otpModalRef = React.createRef();，则模态可行，但是当我单击登录时，它给出了onOpenModal未定义。因此，我必须在构造函数中进行Createref。知道为什么会发生吗？我是Reactjs

的新手

以下是我的代码

    static contextTypes = {
    router: PropTypes.object
  }
constructor(props,context){
    super(props,context);
    this.state = {
        fname:'',
        lname:'',
        emailaddress:'',
        password:'',
        mobile:'',
        user:'',
        login_pass:''
    }
    this.regi_data = this.regi_data.bind(this);
    this.login_data = this.login_data.bind(this);
    this.otpModalRef = React.createRef();
}
regi_data(e){
    this.setState({[e.target.name] : e.target.value}
    );
}
login_data(e){
    this.setState({[e.target.name] : e.target.value})
}
otpModalRef = ({onOpenModal}) => {
   this.showModal = onOpenModal;
}
componentDidMount(){
}

login = (e) => {
    e.preventDefault();
     axios.post('/api/signin', { 
                    user:this.state.user,
                    password:this.state.login_pass,
                })
      .then(res => {
            console.log(res);
            this.context.router.history.push({
                    pathname:'/',
                });
      })
      .catch(function (error) {
        console.log(error.message);
      })
}
register = (e,ref) => {
    e.preventDefault(); 
    axios.post('/api/user/add', { 
                    firstname: this.state.fname,
                    lastname:this.state.lname,
                    email:this.state.emailaddress,
                    password:this.state.password,
                    mobile:this.state.mobile 
                },              
            )
      .then(res => {
            console.log(res);
            this.showModal();
      })
}

以下是渲染代码

    render(){
    return(
        <div className="kr-logincontent">
                <div className="kr-themetabs">
                    <ul className="kr-tabnavloginregistered" role="tablist">
                        <li role="presentation" className="active"><a href="#kr-loging" data-toggle="tab" aria-expanded="false">Log in</a></li>
                        <li role="presentation" className=""><a href="#kr-register" data-toggle="tab" aria-expanded="true">Register</a></li>
                    </ul>
                    <div className="tab-content kr-tabcontentloginregistered">
                        <div role="tabpanel" className="tab-pane fade active in" id="kr-loging">
                            <form onSubmit={this.login} className="kr-formtheme kr-formlogin">
                                <fieldset>
                                    <div className="form-group kr-inputwithicon">
                                        <i className="icon-profile-male"></i>
                                        <input value={this.state.user} onChange={this.login_data} type="text" name="user" className="form-control" placeholder="Username Or Email"/>
                                    </div>
                                    <div className="form-group kr-inputwithicon">
                                        <i className="icon-icons208"></i>
                                        <input value={this.state.login_pass}onChange={this.login_data}  type="password" name="login_pass" className="form-control" placeholder="Password"/>
                                    </div>
                                    <div className="form-group">
                                        <div className="kr-checkbox">
                                            <input type="checkbox" name="remember" id="rememberpass2"/>
                                            <label htmlFor="rememberpass2">Remember me</label>
                                        </div>
                                        <span><a href="#">Lost your Password?</a></span>
                                    </div>
                                    <button className="kr-btn kr-btngreen" >login</button>
                                </fieldset>
                            </form>
                        </div>
                        <div role="tabpanel" className="tab-pane fade " id="kr-register">
                            <form onSubmit={this.register} className="kr-formtheme kr-formlogin">
                                <fieldset>
                                    <div className="form-group kr-inputwithicon">
                                        <i className="icon-profile-male"></i>
                                        <input type="text" onChange={this.regi_data} value={this.state.fname} name="fname" className="form-control" placeholder="Firstname"/>
                                    </div>
                                    <div className="form-group kr-inputwithicon">
                                        <i className="icon-profile-male"></i>
                                        <input type="text" onChange={this.regi_data} value={this.state.lname} name="lname" className="form-control" placeholder="Lastname"/>
                                    </div>
                                    <div className="form-group kr-inputwithicon">
                                        <i className="icon-icons208"></i>
                                        <input type="email" onChange={this.regi_data} value={this.state.emailaddress} name="emailaddress" className="form-control" placeholder="Email Address"/>
                                    </div>
                                    <div className="form-group kr-inputwithicon">
                                        <i className="icon-lock-stripes"></i>
                                        <input type="password" onChange={this.regi_data} value={this.state.password}  name="password" className="form-control" placeholder="Password"/>
                                    </div>
                                    <div className="form-group kr-inputwithicon">
                                        <i className="icon-phone"></i>
                                        <input type="number" onChange={this.regi_data} value={this.state.mobile} name="mobile" className="form-control" placeholder="Mobile"/>
                                    </div>
                                    <button className="kr-btn kr-btngreen">Register</button>
                                </fieldset>
                            </form>
                        </div>
                    </div>
                </div>
                <div className="kr-shareor"><span>or</span></div>
                <div className="kr-signupwith">
                    <h2>Sign in With...</h2>
                    <ul className="kr-signinloginwithsocialaccount">
                        <li className="kr-facebook"><a href="javascript:void(0);"><i className="icon-facebook-1"></i><span>Facebook</span></a></li>
                        <li className="kr-twitter"><a href="javascript:void(0);"><i className="icon-twitter-1"></i><span>Twitter</span></a></li>
                        <li className="kr-googleplus"><a href="javascript:void(0);"><i className="icon-google4"></i><span>Google +</span></a></li>
                    </ul>
                </div>
                <div className="otp_modal">
                    <Otp ref={this.otpModalRef} ></Otp>
                </div>
            </div>
    )
}

Answer 1

第一个点是代码覆盖您在构造函数中创建的ref。

otpModalRef = ({onOpenModal}) => { this.showModal = onOpenModal; }

第二点是您需要定义this.showmodal =构造函数中的null。

您可以提供渲染功能和JSX代码吗？

我希望它可以帮助您改变实现。

Answer 2

  static contextTypes = {
    router: PropTypes.object
  }
constructor(props,context){
    super(props,context);
    this.state = {
        fname:'',
        lname:'',
        emailaddress:'',
        password:'',
        mobile:'',
        user:'',
        login_pass:''
    }
    this.otpModalRef = React.createRef();
}
regi_data = (e) => {
    this.setState({[e.target.name] : e.target.value}
    );
}
login_data = (e) => {
    this.setState({[e.target.name] : e.target.value})
}
showModal = () => {
   this.otpModalRef.onOpenModal();
   //or
   //this.otpModalRef.current.onOpenModal();
}
login = (e) => {
    e.preventDefault();
     axios.post('/api/signin', { 
                    user:this.state.user,
                    password:this.state.login_pass,
                })
      .then(res => {
            console.log(res);
            this.context.router.history.push({
                    pathname:'/',
                });
      })
      .catch(function (error) {
        console.log(error.message);
      })
}
register = (e,ref) => {
    e.preventDefault(); 
    axios.post('/api/user/add', { 
                    firstname: this.state.fname,
                    lastname:this.state.lname,
                    email:this.state.emailaddress,
                    password:this.state.password,
                    mobile:this.state.mobile 
                },              
            )
      .then(res => {
            console.log(res);
            this.showModal();
      })
}

 render(){
    return(
        <div className="kr-logincontent">
                <div className="kr-themetabs">
                    <ul className="kr-tabnavloginregistered" role="tablist">
                        <li role="presentation" className="active"><a href="#kr-loging" data-toggle="tab" aria-expanded="false">Log in</a></li>
                        <li role="presentation" className=""><a href="#kr-register" data-toggle="tab" aria-expanded="true">Register</a></li>
                    </ul>
                    <div className="tab-content kr-tabcontentloginregistered">
                        <div role="tabpanel" className="tab-pane fade active in" id="kr-loging">
                            <form onSubmit={this.login} className="kr-formtheme kr-formlogin">
                                <fieldset>
                                    <div className="form-group kr-inputwithicon">
                                        <i className="icon-profile-male"></i>
                                        <input value={this.state.user} onChange={this.login_data} type="text" name="user" className="form-control" placeholder="Username Or Email"/>
                                    </div>
                                    <div className="form-group kr-inputwithicon">
                                        <i className="icon-icons208"></i>
                                        <input value={this.state.login_pass}onChange={this.login_data}  type="password" name="login_pass" className="form-control" placeholder="Password"/>
                                    </div>
                                    <div className="form-group">
                                        <div className="kr-checkbox">
                                            <input type="checkbox" name="remember" id="rememberpass2"/>
                                            <label htmlFor="rememberpass2">Remember me</label>
                                        </div>
                                        <span><a href="#">Lost your Password?</a></span>
                                    </div>
                                    <button className="kr-btn kr-btngreen" >login</button>
                                </fieldset>
                            </form>
                        </div>
                        <div role="tabpanel" className="tab-pane fade " id="kr-register">
                            <form className="kr-formtheme kr-formlogin">
                                <fieldset>
                                    <div className="form-group kr-inputwithicon">
                                        <i className="icon-profile-male"></i>
                                        <input type="text" onChange={this.regi_data} value={this.state.fname} name="fname" className="form-control" placeholder="Firstname"/>
                                    </div>
                                    <div className="form-group kr-inputwithicon">
                                        <i className="icon-profile-male"></i>
                                        <input type="text" onChange={this.regi_data} value={this.state.lname} name="lname" className="form-control" placeholder="Lastname"/>
                                    </div>
                                    <div className="form-group kr-inputwithicon">
                                        <i className="icon-icons208"></i>
                                        <input type="email" onChange={this.regi_data} value={this.state.emailaddress} name="emailaddress" className="form-control" placeholder="Email Address"/>
                                    </div>
                                    <div className="form-group kr-inputwithicon">
                                        <i className="icon-lock-stripes"></i>
                                        <input type="password" onChange={this.regi_data} value={this.state.password}  name="password" className="form-control" placeholder="Password"/>
                                    </div>
                                    <div className="form-group kr-inputwithicon">
                                        <i className="icon-phone"></i>
                                        <input type="number" onChange={this.regi_data} value={this.state.mobile} name="mobile" className="form-control" placeholder="Mobile"/>
                                    </div>
                                    <button onClick={this.register} className="kr-btn kr-btngreen">Register</button>
                                </fieldset>
                            </form>
                        </div>
                    </div>
                </div>
                <div className="kr-shareor"><span>or</span></div>
                <div className="kr-signupwith">
                    <h2>Sign in With...</h2>
                    <ul className="kr-signinloginwithsocialaccount">
                        <li className="kr-facebook"><a href="javascript:void(0);"><i className="icon-facebook-1"></i><span>Facebook</span></a></li>
                        <li className="kr-twitter"><a href="javascript:void(0);"><i className="icon-twitter-1"></i><span>Twitter</span></a></li>
                        <li className="kr-googleplus"><a href="javascript:void(0);"><i className="icon-google4"></i><span>Google +</span></a></li>
                    </ul>
                </div>
                <div className="otp_modal">
                    <Otp ref={this.otpModalRef} ></Otp>
                </div>
            </div>
    )
}

    router: PropTypes.object
  }
constructor(props,context){
    super(props,context);
    this.state = {
        fname:'',
        lname:'',
        emailaddress:'',
        password:'',
        mobile:'',
        user:'',
        login_pass:''
    }
    this.otpModalRef = React.createRef();
}
regi_data = (e) => {
    this.setState({[e.target.name] : e.target.value}
    );
}
login_data = (e) => {
    this.setState({[e.target.name] : e.target.value})
}
showModal = () => {
   this.otpModalRef.onOpenModal();
   //or
   //this.otpModalRef.current.onOpenModal();
}

login = (e) => {
    e.preventDefault();
     axios.post('/api/signin', { 
                    user:this.state.user,
                    password:this.state.login_pass,
                })
      .then(res => {
            console.log(res);
            this.context.router.history.push({
                    pathname:'/',
                });
      })
      .catch(function (error) {
        console.log(error.message);
      })
}
register = (e,ref) => {
    e.preventDefault(); 
    axios.post('/api/user/add', { 
                    firstname: this.state.fname,
                    lastname:this.state.lname,
                    email:this.state.emailaddress,
                    password:this.state.password,
                    mobile:this.state.mobile 
                },              
            )
      .then(res => {
            console.log(res);
            this.showModal();
      })
}