[关闭]
@2890594972 2018-05-04T03:12:27.000000Z 字数 823 阅读 673

react状态机

react

状态机

注意
onClick={this.handleClick} 换成 onclick={this.handleClick} 

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>状态机制 React state</title>
  6.     <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
  7.     <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
  8.     <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
  9.   </head>
  10.   <body>
  11.     <div id="example"></div>
  12.     <script type="text/babel">    
  13.       var LinkNews = React.createClass({
  14.          getInitialState: function(){
  15.             return {
  16.                name: '大象',
  17.                linked: false
  18.             }
  19.          },
  20.          handleClick: function(event){
  21.             this.setState({
  22.                 linked: !this.state.linked
  23.             })
  24.          },
  26.          render: function(){
  27.             var text = this.state.linked ? '喜欢':'不喜欢';
  29.             return (
  30.                <p onClick = {this.handleClick}>
  31.                 你<em>{this.state.name+text}</em>我
  32.                </p>
  34.             )
  35.          }
  37.       });
  39.       ReactDOM.render(
  40.         <LinkNews />,
  41.         document.getElementById('example')
  42.       );
  43.     </script>
  44.   </body>
  45. </html>
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注