React TextBox state

最新推荐文章于 2023-11-02 16:20:28 发布

qq_34351732

最新推荐文章于 2023-11-02 16:20:28 发布

阅读量337

点赞数

分类专栏： react

本文链接：https://blog.csdn.net/qq_34351732/article/details/78531422

版权

react 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

=> this代表这个函数对象不是外部的

<html>
  <head>
      <title>Document</title>
      <script src="../react.js"></script>
      <script src="../react-dom.js"></script>
      <script src="http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script>
  </head>

  <body>
      <div id="reactContainer"/>

      <script type="text/babel">
        const TexBoxComponent = React.createClass({
          getInitialState: () => ({enable:false}),
          handleClick: function(event) {this.setState({enable: !this.state.enable})},//单数据流
          render: function() {
            return <p>
                <input type="text" disabled={this.state.enable}/>
                <button onClick={this.handleClick}>change textbox state</button>
            </p>}
        })

        ReactDOM.render(
          <TexBoxComponent/>,
          document.getElementById('reactContainer')
        )
    </script>
  </body>
</html>