imooc-react入門課程代碼--20170424

<!DOCTYPE html>
<html>
<head>
? ?<meta charset="utf-8">
? ?<title>imooc-react入門課程代碼</title>
? ?<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
? ?<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
? ?<style>
body{
? ? ? ? ? ?color:#f00;
? ? ? ?}
? ?</style>
</head>
<body>
? ?<div id="container"></div>
? ?<script type="text/jsx">
var TestClickComponent=React.createClass({
? ? ? ? ? ?handleClick:function (event) {
? ? ? ? ? ? ? ?var tipE=React.findDOMNode(this.refs.tip);
? ? ? ? ? ? ? ?if(tipE.style.display==='none'){
? ? ? ? ? ? ? ? ? ?tipE.style.display='inline';
? ? ? ? ? ? ? ?}else{
? ? ? ? ? ? ? ? ? ?tipE.style.display='none'
}
? ? ? ? ? ? ? ?event.stopPropagation();
? ? ? ? ? ? ? ?event.preventDefault();
? ? ? ? ? ? ? ?var colorE=React.findDOMNode(this.refs.color);
? ? ? ? ? ? ? ?if(colorE.style.display==='none'){
? ? ? ? ? ? ? ? ? ?colorE.style.display='inline';
? ? ? ? ? ? ? ?}else{
? ? ? ? ? ? ? ? ? ?colorE.style.display='none'
}
? ? ? ? ? ?},
? ? ? ? ? ?render:function () {
? ? ? ? ? ? ? ?return(
<div>
? ? ? ? ? ? ? ? ? ? ? ?<button onClick={this.handleClick}>顯示|隱藏</button><span ref="tip">測試點(diǎn)擊</span>
? ? ? ? ? ? ? ? ? ? ? ?<span ref="color">測試點(diǎn)擊后的顏色</span>
? ? ? ? ? ? ? ? ? ?</div>
);
? ? ? ? ? ?}
? ? ? ?});
? ? ? ?var TestInputComponent=React.createClass({
? ? ? ? ? ?getInitialState:function () {
? ? ? ? ? ? ? ?return{
? ? ? ? ? ? ? ? ? ?inputContent:'默認(rèn)'
}
? ? ? ? ? ?},
? ? ? ? ? ?changeHandler:function (event) {
? ? ? ? ? ? ? ?this.setState({
? ? ? ? ? ? ? ? ? ?inputContent:event.target.value
? ? ? ? ? ? ? ?});
? ? ? ? ? ? ? ?event.stopPropagation();
? ? ? ? ? ? ? ?event.preventDefault();
? ? ? ? ? ?},
? ? ? ? ? ?render:function () {
? ? ? ? ? ? ? ?return(
<div>
? ? ? ? ? ? ? ? ? ? ? ?<input type="text" onChange={this.changeHandler}/><span>{this.state.inputContent}</span>
? ? ? ? ? ? ? ? ? ?</div>
)
}
? ? ? ?});
? ? ? ?React.render(
<div>
? ? ? ? ? ? ? ?<TestClickComponent/>
? ? ? ? ? ? ? ?<br/><br/>
? ? ? ? ? ? ? ?<TestInputComponent/>
? ? ? ? ? ?</div>,
? ? ? ? ? ?document.getElementById('container'));
? ?</script>
</body>
</html>