这几天需要用react写一个TodoList完成增、删、改、查，到菜鸟教程看了下，又到慕课网上学了下基础内容，本来打算通过实战视频学一下的，结果发现，里边也是用到好多前端基础，
慕课网这样要求的：1.需要有一定的JS，CSS前端基础。 2.熟悉Sass和Compass 3.了解Yeoman、Grunt、Webpack 4.了解CommonJS、NodeJS。看完这几点的时候，我当时就蒙圈了。这些东西我没学过的太多了，而且看了相关的几十篇博客，也是多数用node.js、Java做的。。。还有有些能够理解一部分，最后勉强实现增删改功能，查询还没来的急学，后面有时间，好好重头学习下react再完善吧。
以下是在HTML界面实现的代码：（改有的注释应该都写了）
"en">
"UTF-8">
this.handleChange} todo={this.state.arr} />
{/*
集成 DeleteList 组件，传入两个属性 onDel,todo
todo将 todolist 的数据传入到组件，当删除时，更新todolist数据
onDel - 将 handleChange 函数传入到组件，删除时，用它来处理最新的todolist数据
*/}
this.handleChange} todo={this.state.arr} />
);
}
});
/*
* ddList 组件用于新增数据，需要todo 和 onAdd 两个属性
* 当从 input 中获取数据时，将新数据 push 到todo中，
* 然后使用 onAdd 调用 TodoList 的 handleChange 来更新state，然后react自动render
* */
// 增加和查询可以合并到一起用
var AddList = React.createClass({
// 增加数据模块
handleAdd: function (e) {
e.preventDefault();
// 通过 refs 获取相信input元素，然后获取输入的内容
var titleDOM = this.refs.title.getDOMNode();
var titleValue = titleDOM.value.trim();
var contentDOM = this.refs.content.getDOMNode();
var contentValue = contentDOM.value.trim();
var timeDOM = this.refs.time.getDOMNode();
// 时间强行转化位数字，方便后续排序
var timeValue = Number(timeDOM.value.trim());
// 获取传入的todolist数据
var rows = this.props.todo || [];
// console.log("ok")
if (titleValue !== '' && contentValue !== '' && timeValue !== '') {
// 更新数据，并使用 onAdd 更新到 TodoList 组件的 state 中
if(!isNaN(timeValue)){
// 把对应的每个input的值通过对象保存到数组中
rows.push(
{
title:titleValue,
content:contentValue,
time:timeValue
}
);
this.props.onAdd(rows);
}else{
alert("日期只能为数字（单位：天），请重新输入！");
}
}else{
alert("您有信息未填写，请核对后再【添加】");
}
// 把值保存到数组后，及时清空input，用户体验好
titleDOM.value = contentDOM.value = timeDOM.value= '';
},
/* 搜索数据模块
* 点击搜索的时候，先把所有className的input的display设置为none隐藏
* 数组中遍历的时候，把符合条件的，设为 显示 *
* */
handleSearch:function(e) {
e.preventDefault();
console.log(this.refs.title.getDOMNode())
this.props.todo.map(function (item, i) {
if(item.time == 10){
alert("10")
};
console.log(item.time + "......"+ i);
})
},
render: function () {
return (
// 用回车键 和 点击事件，触发 handleAdd 事件，用户体验好
);
}
});
/* DeleteList 完成删除 修改功能
*可以删除某一项内容，有 noDel，todo两个属性
*遍历todo的内容，生成数据列表和删除按钮
*对某一项执行删除时，将todo中的数据删除
* 然后通过 onDel 事件调用 TodoList 的 handleChange 来更新state，然后react自动render
*修改值时用的中间变量
*/
var titleV,contentV,timeV;
var DeleteList = React.createClass({
//删除事件绑定
handleDel: function (e) {
var delIndex = e.target.getAttribute('data-key');
// 更新数据，并使用 onDel 更新到 TodoList 的 state 中，以便 React自动render
this.props.todo.splice(delIndex, 1);
this.props.onDel(this.props.todo);
},
// 修改事件绑定
titleChange: function (e) {
// console.log(e.target.value)
titleV = e.target.value;
// console.log(titleV)
},
contentChange: function (e) {
contentV = e.target.value;
},
timeChange: function (e) {
timeV = e.target.value;
},
/*
* 修改的时候，用户先直接修改数据
* 然后点击确认修改的时候在完成对数组值的修改操作
* */
handleAlt: function (e) {
e.preventDefault();
var delIndex = e.target.getAttribute('data-key');
this.props.todo[delIndex].title = titleV;
this.props.todo[delIndex].content = contentV;
this.props.todo[delIndex].time = timeV;
console.log(this.props.todo)
},
render: function () {
// console.log(this.props.todo.map)
return (
"todo-list">
{
// {/* 遍历数据 */}
this.props.todo && this.props.todo.map(function (item, i) {
return (
- "tip">
this.titleChange} className="val"/>
this.contentChange} className="val"/>
this.timeChange} className="val"/>
);
}.bind(this)) // {/* 绑定函数的执行this - 以便 this.handleDel */}
}
);
}
});
React.render(转载于:https://www.cnblogs.com/6long/p/6044503.html