hello reactjs

按照菜鸟教程的实例，学习的第一个reactjs组件。以下红色字体是我记录的学习过程中遇到的坑或者知识点。

var TodoList = React.createClass({//只是用来渲染Ul，他的props.items改变后会触发重新渲染；

  render: function() {

    var createItem = function(itemText) {

      return <li>{itemText}</li>;

    };

    return <ul>{this.props.items.map(createItem)}</ul>;//该方法遍历props.Items中的item，使他们被createItem调用。items.forEach(function(i){createItem(i)})

  }

});

var TodoApp = React.createClass({

  getInitialState: function() {//创建初始state

    return {items: [], text: ''};

  },

  onChange: function(e) {

    this.setState({text: e.target.value});//通过事件获取值

  },

  handleSubmit: function(e) {

    e.preventDefault();

    var nextItems = this.state.items.concat([this.state.text]);

    var nextText = '';

    this.setState({items: nextItems, text: nextText});//动态绑定，state中的值改变后，会触发 <input onChange={this.onChange} value={this.state.text} />

 　　

　如果换一种做法：直接采用this.state.items.push(this.state.text);

   确实改变了this.state.items的值，然而并不能触发数据的流动，页面不会因此更新数据。所以必须通过setState()。

 

 },

  render: function() {//最终渲染出口，需要用()包住元素

    return (

      <div>

        <h3>TODO</h3>//切记闭合/

        <TodoList items={this.state.items} />//调用其他组件

        <form onSubmit={this.handleSubmit}>//所有事件名需要严格地使用驼峰

          <input onChange={this.onChange} value={this.state.text} />//state相关要加上{}包住

          <button>{'Add #' + (this.state.items.length + 1)}</button>//这个button默认就带上了提交

        </form>

      </div>

    );

  }

});

 

React.render(<TodoApp />, document.getElementById("container"));