<html>
<head>
<title>hellow</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
<meta charset="utf-8" />
</head>
<body>
<div id="root">
</div>
<script type="text/jsx">
//创建组建
var TestButtonComponent = React.createClass({
handleClick:function(event){
var tipsE = React.findDOMNode(this.refs.tips);
if(tipsE.style.display === 'none'){
tipsE.style.display = 'inline';
}else{
tipsE.style.display = 'none';
}
event.stopPropagation(); //阻止事件冒泡
event.preventDefault(); //阻止默认事件
},
render:function(){
return (
<div>
<button onClick={this.handleClick}>显示|隐藏</button><span ref="tips">测试button</span>
</div>);
}
});
var TestInputComponent = React.createClass({
getInitialState:function(){
return {
inputContent:'ii'
};
},
handleChange:function(event){
this.setState({
inputContent:event.target.value
});
},
render:function(){
return (
<div>
<input type="text" onChange={this.handleChange} /> <span>{this.state.inputContent}</span>
</div>
);
}
});
//调用组建
React.render(
<div>
<TestButtonComponent />
<br/> <br/>
<br/>
<TestInputComponent />
</div>,
document.getElementById('root')
);
</script>
</body>
<html>