https://github.com/lianbinghua

react 绑定事件

1.显示隐藏

2.输入框输入内容，立即显示出来

代码如下：

注意：版本

React v15.0.1

ReactDOM v15.0.1

browser.min.js是编译文件，将代码解析为浏览器识别的js

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8" />
 <script type="text/javascript" src="react.js"></script>
 <script type="text/javascript" src="react-dom.js"></script>
 <script type="text/javascript" src="browser.min.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
  var TestClickComponent=React.createClass({
      handleClick:function(event){
      var tip=this.refs.tip;
      if(tip.style.display=="none"){
         tip.style.display='inline';
      }else{
         tip.style.display='none';         
      }
      event.stopPropagation();
      event.preventDefault();
      },
      render:function(){
          return(
           <div>
              <button onClick={this.handleClick}>显示|隐藏</button><span ref="tip">测试</span>
           </div>
          )
      }
  });

  var TestInputComponent=React.createClass({
          getInitialState:function(){
            return{
                inputContent:''
            }
          },
          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>
            )
        }
  });
 ReactDOM.render(<div>
                  <TestClickComponent/>
                  <TestInputComponent/>
               </div>,document.getElementById("container"));
</script>
</body>
</html>

 

posted @ 2016-08-04 23:20  连冰华  阅读(5207)  评论(0)  编辑  收藏  举报