zoukankan html css js c++ java

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>

查看全文

相关阅读:
Burp suite
CTF 压缩包分析
 PHP代码审计
 SQL注入
 常考文件包含漏洞
 PHP黑魔法
 CTF WEB笔记
 MsSQL数据库提权
 ATT&CK实战系列
 Linux访问控制

原文地址：https://www.cnblogs.com/xiaotaiyang/p/5738821.html