首页 > Web开发 > 详细

hello reactjs

时间:2016-01-27 00:42:38      阅读:324      评论:0      收藏:0      [点我收藏+]
按照菜鸟教程的实例,学习的第一个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} />
  },
  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"));

hello reactjs

原文:http://www.cnblogs.com/saac/p/5161887.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!