react 学习记录（三）

写在前面

今天再接再砺，把教程过完哈哈哈哈

demo09

<script type="text/babel">
      var Input = React.createClass({
        getInitialState: function() {
          return {value: 'Hello!'};
        },
        handleChange: function(event) {
          this.setState({value: event.target.value});
        },
        render: function () {
          var value = this.state.value;
          return (
            <div>
              <input type="text" value={value} onChange={this.handleChange} />
              <p>{value}</p>
            </div>
          );
        }
      });

      ReactDOM.render(<Input/>, document.getElementById('example'));
    </script>

这个demo中，忽然有种想法，这就是实现数据的单向绑定的例子对不哈

ps1：有点要注意的这里的onChange是react魔改事后的，变成即时调用，而不是原生的onchange须要回车或者失焦后才会调用。

ps2：注意与demo7的区别

这是有个合起来的想法，加入我有一个输入框，而后输入值后，点击按钮，把值给到标签上。。

<script type="text/babel">
      var Input = React.createClass({
        getInitialState: function() {
          return {value: 'Hello!'};
        },
        handleChange: function(event) {
          this.setState({value: event.target.value});
        },
        render: function () {
          var value = this.state.value;
          return (
            <div>
              <input type="text" value={value}/>
              <input type="button" value="click this" onClick={this.handleClick} />
              <p>{value}</p>
            </div>
          );
        }
      });

      ReactDOM.render(<Input/>, document.getElementById('example'));
    </script>

从新思考人生，使用了react，咱们对于js的使用要更加听从与规范。

什么是规范，能变的 ，在类之中，都应该放在this.state中

而不是随便搞得var

<script type="text/babel">
      var Input = React.createClass({
        
        getInitialState: function() {
          return {value: 'Hello!',temp:''};
        },
        handleChange: function(event) {
          this.setState({value: event.target.value});
        },
        handleClick:function(){
          this.setState({value:this.state.value,temp:this.state.value});
        },
        render: function () {
          var value = this.state.value;
          var temp = this.state.temp;
          return (
            <div>
              <input type="text" value={value} onChange={this.handleChange} />
              <input type="button" value="click this" onClick={this.handleClick} />
              <p>{temp}</p>
            </div>
          );
        }
      });

      ReactDOM.render(<Input/>, document.getElementById('example'));
    </script>

歪楼了

回归demo9

例子主要讲的是能够经过

event.target.value

获取值ko

demo10

说好的几个小时入门的react。。

貌似几天看的一共也没个小时。。。。

--------------------------小分割下

又学到了一招，经过

setinterval(function(){}.bind(this), 1000)

来解决在setinterval(function(){中的this指向的window的问题}, 1000)

setTimeout里面的上下文至关因而window，因此指向的都是window

这里经过.bind(this)把上下文换成setinterval所在的上下文。

componentDidMount: function () {
          this.timer = setInterval(function () {
            var opacity = this.state.opacity;
            opacity -= .05;
            if (opacity < 0.1) {
              opacity = 1.0;
            }
            this.setState({
              opacity: opacity
            });
          }.bind(this), 100);
          alert('1111');
        },

因此里面能够安心的使用this.setState，（之前本身都是全局搞个that借用下 /(ㄒoㄒ)/~~）

在方法中的js能够正常使用，可是在React.createClass({...})这一级不能用。只能用指定的/

render: function () {
          return (
            <div style={{opacity: this.state.opacity}}>
              Hello {this.props.name}
            </div>
          );
        }

注意样式写法{{ }}

 

未完待续