开发者问题收集

ref 返回 null 值 reactjs。如何处理?

2019-03-14
195

我正在使用 reactjs 中的 ref 从另一个组件打开模式。为此,我正在执行以下代码。

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

并在以下代码中呈现

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

然后通过 this.showModal(); 调用注册函数。它工作正常。但是当我单击登录按钮时,它给了我 TypeError:无法读取 null 的属性“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) => {
    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 错误。

1个回答

您需要调用 React.createRef() 来创建句柄,而不是像在路由代码中那样。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.otpModalRef = React.createRef();
  }
  render() {
    ...
  }
}
Tal Avissar
2019-03-14