zoukankan      html  css  js  c++  java
  • react 点击事件

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</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>
    </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.preventDefault();
                    event.stopPropagation();
                },
                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.preventDefault();
                    event.stopPropagation();
                },
                render:function(){
                    return(
                        <div>
                            <input type="text" onChange={this.changeHandler} /><span>{this.state.inputContent}</span>
                        </div>
                    )
                }
            });
            React.render(
            <div>
                  <TestClickComponent></TestClickComponent>
                  <TestInputComponent></TestInputComponent>
              </div>,document.getElementById("container")
    
    
            )
        </script>
    </body>
    </html>
  • 相关阅读:
    构建之法8,9,10章
    作业6
    通过处理器类型获得处理器对象
    面经
    C语言实现字符串替换
    计算机网络整理
    常见面试题
    数据库常见面试题
    redis常见知识整理
    项目总结
  • 原文地址:https://www.cnblogs.com/zxyun/p/7144416.html
Copyright © 2011-2022 走看看