状態が正常でない単純な反応の例

単純な例を、状態と反応して書きました。私はボタンを持っています。このボタンをクリックすると、メッセージを表示したいのですが、ビューに何も表示されず、コンソールにエラーも表示されません。おかげで状態が正常でない単純な反応の例

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

状態が正常でない単純な反応の例

答えて

関連する問題