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>
          );
        }

注意樣式寫法{{ }}

 

未完待續