簡單的React示例狀態不起作用

我寫了一個簡單的示例，用React與狀態進行了比較。我有一個按鈕，當我點擊這個按鈕時，我想顯示一條消息，但是在視圖中沒有看到任何東西，控制檯也沒有錯誤......任何人都可以幫助我？由於簡單的React示例狀態不起作用

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="UTF-8" /> 
     <title>React State</title> 
     <script src="https://unpkg.com/[email protected]/dist/react-with-addons.js"></script> 
     <script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script> 
    </head> 
<body> 
    <div id="clickableButton"></div> 

    <script type="text/babel"> 
     var myButton = React.createClass({ 
      getInitialState: function() { 
       return { clicked: false }; 
      }, 
      render: function() { 
        if(this.state.clicked) return <div><button onclick="{doClick}">Click me</button> Clicked!</div>; 
        else return <div><button onclick="{doClick}">Click me</button></div>; 
       } 
      }, 
      doClick: function() { 
       if(this.state.clicked) this.setState({ clicked: false }); 
       else this.setState({ clicked: true }); 
      } 
     }); 
     ReactDOM.render(<myButton />, document.getElementById("clickableButton")); 
    </script> 
</body> 
</html>

來源

2017-03-24 Hazlo8

你的括號不正確地匹配，去掉render多餘的括號：

render: function() { 
    if(this.state.clicked) return <div><button>Click me</button> Clicked!</div>; 
    else return <div><button>Click me</button></div>; 
} << REMOVE THIS LINE 
},

而且你應該使用資金的情況下爲你的組件，因此重命名myButton到MyButton：

var MyButton = React.createClass({ 
... 
ReactDOM.render(<MyButton />, document.getElementById("clickableButton"));

現在它應該工作。

來源

2017-03-24 10:42:51 CodinCat

嗨，謝謝！我看到按鈕，但點擊事件沒有被觸發：

– Hazlo8

刪除'onclick'中的引號，它也應該是'onClick'：'onClick = {this.doClick}' – CodinCat

完美，非常感謝！ – Hazlo8

簡單的React示例狀態不起作用

回答

相關問題