基础知识：
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.children
return <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
原文地址：https://www.cnblogs.com/ss977/p/8228267.html
时间： 2024-11-02 23:29:10