react 綁定事件

本文轉載自查看原文 2016-08-04 23:20 4778 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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 React事件綁定的方式 React 在body上綁定事件以及阻止事件冒泡 React綁定事件動態化的實現方法 react事件回調函數傳遞參數：綁定事件傳參 React中的響應式設計思想和事件綁定 React中的響應式設計思想和事件綁定 react事件處理函數中綁定this的bind()函數 React 事件對象、鍵盤事件、表單事件、ref獲取dom節點、react實現類似Vue雙向數據綁定如何優雅地在React中處理事件響應&&React綁定onClick為什么要用箭頭函數？事件綁定on與hover事件