reactJs 方法没定义问题

19051923

发布于
2016-06-02

定义了一个方法弹出alert，运行提示错误图片描述：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Hello React!</title>
    <link rel="stylesheet" href="src/style.css" />
        <meta name="viewport" content="width=device-width, initial-scale=0.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
    
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
    <script src="build/browser.min.js"></script>
    
  </head>
  <body>
    <div id="container"></div>
    <script type="text/babel">        
        var option=[
      {"className":"op1","value":"开始游戏"},
      {"className":"op2","value":"排行榜"},
      {"className":"op3","value":"领取话费"},
      {"className":"op4","value":"召唤小伙伴"},
     
      ];
          var times=0;
          var Shade=React.createClass({              
              render:function(){
                  return(
                      <div className="shade" style={{display: 'none'}}></div>
                  )
              }
          })          
                var Btn=React.createClass({                    
                        handleClick: function() {
                            alert("oo");    
                            this.refs.zheDang.style.display="block";
                        },                    
                    render:function(){  
                        return (
                        <div class="outside">
                            <div className="frame1">
                                <ul>
                                    {option.map(function (tag) {
                                      return   <li className={tag.className}>
                                                  <input type="button" className="btn" value={tag.value}  onClick={this.handleClick}/>
                                                    </li>
                                             })}
                                        </ul>
                                <h5>您还有{times}次机会</h5>                        
                            </div>
                            <Shade ref="zheDang"/>
                        </div>
                        
                        )
                    }
                });
                
                ReactDOM.render(
                  <Btn />,    
                  document.getElementById('container')                 
                );
    </script>
    
  </body>
</html>

react 前端

阅读 4k

4 个回答

得票最新

leftstick

27.3k33329

发布于
2016-06-02

✓ 已被采纳

this指针不对：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Hello React!</title>
    <link rel="stylesheet" href="src/style.css" />
        <meta name="viewport" content="width=device-width, initial-scale=0.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
    
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
    <script src="build/browser.min.js"></script>
    
  </head>
  <body>
    <div id="container"></div>
    <script type="text/babel">        
        var option=[
      {"className":"op1","value":"开始游戏"},
      {"className":"op2","value":"排行榜"},
      {"className":"op3","value":"领取话费"},
      {"className":"op4","value":"召唤小伙伴"},
     
      ];
          var times=0;
          var Shade=React.createClass({              
              render:function(){
                  return(
                      <div className="shade" style={{display: 'none'}}></div>
                  )
              }
          })          
                var Btn=React.createClass({                    
                        handleClick: function() {
                            alert("oo");    
                            this.refs.zheDang.style.display="block";
                        },                    
                    render:function(){
                        //这里先改
                        //下面引用的地方也要改
                        var _this = this;
                        return (
                        <div class="outside">
                            <div className="frame1">
                                <ul>
                                    {option.map(function (tag) {
                                      return   <li className={tag.className}>
                                                  <input type="button" className="btn" value={tag.value}  onClick={_this.handleClick}/>
                                                    </li>
                                             })}
                                        </ul>
                                <h5>您还有{times}次机会</h5>                        
                            </div>
                            <Shade ref="zheDang"/>
                        </div>
                        
                        )
                    }
                });
                
                ReactDOM.render(
                  <Btn />,    
                  document.getElementById('container')                 
                );
    </script>
    
  </body>
</html>