react 綁定事件

時間 2019-11-18

標籤 react 綁定事件欄目 React 简体版

原文原文鏈接

1.顯示隱藏javascript

2.輸入框輸入內容，當即顯示出來html

代碼以下：java

注意：版本react

React v15.0.1瀏覽器

ReactDOM v15.0.1babel

browser.min.js是編譯文件，將代碼解析爲瀏覽器識別的jsdom

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。