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