Блог

Я открываю modal из другого компонента, используя ref в reactjs. для этого я выполняю приведенный ниже код.

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

и в приведенном ниже коде

 <div className="otp_modal">
    <Otp ref={this.otpModalRef} ></Otp>
</div>
  

и затем вызывает функцию register с помощью this.showModal(); , она работает нормально. но когда я нажал на кнопку входа, это выдает мне TypeError: Cannot read property 'onOpenModal' of null . Ниже приведены функции входа и регистрации.

     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) => {
    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();
      })
}
  

Не получается, в чем проблема? Если я прокомментирую otpModalRef , он перенаправит на домашнюю страницу, но если я сохраню, выдает ошибку null.

Вам нужно вызвать React.createRef() для создания дескриптора, а не так, как вы делали в коде roure.

 class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.otpModalRef = React.createRef();
  }
  render() {
    ...
  }
}