基础知识：
1. 组件名称开头必须大写
var NewList = React.createClass(){}
2.ReactDOM.render是React最基本的方法，用于将模板转化为HTML语言 并插入制定DOM节点
3.事件都使用骆驼命名法：onClick onChange
4、this.props.children 表示组件的所有子节点
var NotesList = React.createClass({ render: function() { return ( <ol> { React.Children.map(this.props.children, function (child) { // React 提供一个工具方法React.Children来处理this.props.childrenreturn <li>{child}</li>; }) } </ol> ); } }); ReactDOM.render( <NotesList> <span>hello</span> <span>world</span> </NotesList>, document.body );
上面代码的 NoteList 组件有两个 span 子节点，它们都可以通过 this.props.children 读取
5.获取DOM节点-ref属性
<input type="text" ref="txtData">
获取文本框的值
var inputDom = this.refs.txtData; // 不需要使用findDOMNode()方法
var data = inputDom.value;
6.React提倡所有的数据都是由父组件来管理，通过props的形式传递给子组件来处理 this.props
React开发的规范，组件内部的数据由state控制，外部对内部传递数据时使用 props
7.在组建中添加多个属性写法：
var Info = React.createClass({ render:function(){ var myAttr = { ‘ref ‘: ‘txtData‘, ‘data-id‘: ‘inputID‘, ‘onClick‘: function () { console.log("onClick"); } } return <input type="button" {...myAttr} value={this.props.name} /> // {...myAttr}绑定多个属性 } }) ReactDOM.render(<Info name="I AM A BUTTON" />,document.getElementById(‘box‘));
DEMO:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>todolist</title> <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script> <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script> <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script> <style> ul{margin:0;padding:0;} ul li{list-style: none;} .ul-box{margin-top:20px;} .ul-box li{margin-top:10px;} button{margin-left:10px;background: #f1f1f1;border:1px solid #e2e2e2;padding:6px 10px;} .input-txt{height: 27px;line-height: 27px;border:1px solid #e2e2e2;} </style> </head> <div id="container"></div> <script type="text/jsx"> // 增删改Demo // this.props.todo.map 循环 var TodoList = React.createClass({ // 初始化数据 getInitialState:function(){ return{ todoList:[] } }, // 更新数据 changeHandle:function(rows){ this.setState({ todoList : rows }) }, render:function(){ return( <div> <NewList onAdd={this.changeHandle} todo={this.state.todoList}/> <ShowList onDel={this.changeHandle} todo={this.state.todoList} onSave={this.changeHandle}/> </div> ) } }); // 新增 var NewList = React.createClass({ addHandle:function(e){ e.preventDefault(); // 从父组件获取数据 使用props var rows = this.props.todo; // 获取文本框的值 var inputNew = this.refs.txtNewDate; var newData = inputNew.value.trim(); if(newData != ""){ // 追加到原来的数据中 rows.push(newData); this.props.onAdd(rows); } inputNew.value = ""; }, render:function(){ return( <form onSubmit={this.addHandle}> <input className="input-txt" type="text" placeholder="新增内容" ref="txtNewDate" id="txtNewDate"/> <button onClick={this.addHandle}>新增</button> </form> ) } }) // 展示+修改+删除 var ShowList = React.createClass({ delHandle:function(e){ // 获取要删除的索引 var delIndex = e.target.getAttribute("data-key"); this.props.todo.splice(delIndex,1); this.props.onDel(this.props.todo); }, editHandle:function(e){ // 将原本的值赋值到文本框 // 将按钮文字改为保存 var inputNew = document.getElementById("txtNewDate"); //console.log(e.target.innerHTML) inputNew.value = e.target.getAttribute("data-item"); }, saveHandle:function(e){ var saveIndex = e.target.getAttribute("data-key"); var rows = this.props.todo; this.props.todo.map(function(item,i){ if(i == saveIndex){ // 保存时存在相同id则删除原来的 rows.splice(saveIndex,1); } }) var inputNew = document.getElementById("txtNewDate"); var saveData = inputNew.value.trim(); rows.push(saveData); this.props.onSave(rows);// 更新render }, render:function(){ return( <ul className="ul-box"> { // 循环li this.props.todo.map(function(item,i){ var id = "itemList"; return( <li> <label data-id={id-i}>{item}</label> <button data-key={i} onClick={this.delHandle}>删除</button> <button data-key={i} data-item={item} onClick={this.editHandle}>修改</button> <button data-key={i} onClick={this.saveHandle}>保存</button> </li> ) }.bind(this)) } </ul> ) } }) ReactDOM.render(<TodoList/>,document.getElementById("container")); </script> </body> </html>
学习参考：
http://www.ruanyifeng.com/blog/2015/03/react.html
https://www.cnblogs.com/wangfupeng1988/p/5302738.html
