定义了一个方法弹出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>两种方式
1.保存外部的this，像这样
let _this = this;
2.修改你的map写法，像这样
option.map((tag) => {
// ....
})推荐在构造函数里 bind this
map(function(){}.bind(this))