前端 - reactJs 方法没定义问题
本文介绍了前端 - reactJs 方法没定义问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
定义了一个方法弹出alert，运行提示错误：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello React!</title>
<link rel="stylesheet" href="src/style.css" />
<meta name="viewport" content="width=device-width, initial-scale=0.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="build/browser.min.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
var option=[
{"className":"op1","value":"开始游戏"},
{"className":"op2","value":"排行榜"},
{"className":"op3","value":"领取话费"},
{"className":"op4","value":"召唤小伙伴"},
];
var times=0;
var Shade=React.createClass({
render:function(){
return(
<div className="shade" style={{display: 'none'}}></div>
)
}
})
var Btn=React.createClass({
handleClick: function() {
alert("oo");
this.refs.zheDang.style.display="block";
},
render:function(){
return (
<div class="outside">
<div className="frame1">
<ul>
{option.map(function (tag) {
return <li className={tag.className}>
<input type="button" className="btn" value={tag.value} onClick={this.handleClick}/>
</li>
})}
</ul>
<h5>您还有{times}次机会</h5>
</div>
<Shade ref="zheDang"/>
</div>
)
}
});
ReactDOM.render(
<Btn />,
document.getElementById('container')
);
</script>
</body>
</html>
解决方案
this指针不对：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello React!</title>
<link rel="stylesheet" href="src/style.css" />
<meta name="viewport" content="width=device-width, initial-scale=0.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="build/browser.min.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
var option=[
{"className":"op1","value":"开始游戏"},
{"className":"op2","value":"排行榜"},
{"className":"op3","value":"领取话费"},
{"className":"op4","value":"召唤小伙伴"},
];
var times=0;
var Shade=React.createClass({
render:function(){
return(
<div className="shade" style={{display: 'none'}}></div>
)
}
})
var Btn=React.createClass({
handleClick: function() {
alert("oo");
this.refs.zheDang.style.display="block";
},
render:function(){
//这里先改
//下面引用的地方也要改
var _this = this;
return (
<div class="outside">
<div className="frame1">
<ul>
{option.map(function (tag) {
return <li className={tag.className}>
<input type="button" className="btn" value={tag.value} onClick={_this.handleClick}/>
</li>
})}
</ul>
<h5>您还有{times}次机会</h5>
</div>
<Shade ref="zheDang"/>
</div>
)
}
});
ReactDOM.render(
<Btn />,
document.getElementById('container')
);
</script>
</body>
</html>这篇关于前端 - reactJs 方法没定义问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
